<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ES6/ES7/ES8/ES9/ES10/ES11 | 北城韩雨</title><meta name="keywords" content="JavaScript"><meta name="author" content="北城韩雨"><meta name="copyright" content="北城韩雨"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="description" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="ES6&#x2F;ES7&#x2F;ES8&#x2F;ES9&#x2F;ES10&#x2F;ES11">
<meta property="og:url" content="http://example.com/2020/04/22/ES6/index.html">
<meta property="og:site_name" content="北城韩雨">
<meta property="og:description" content="JavaScript">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530659&t=bbcfe1e86f393eecbb0722db1b92e475">
<meta property="article:published_time" content="2020-04-21T16:00:00.000Z">
<meta property="article:modified_time" content="2019-06-02T16:00:00.000Z">
<meta property="article:author" content="北城韩雨">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530659&t=bbcfe1e86f393eecbb0722db1b92e475"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2020/04/22/ES6/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'mediumZoom',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'ES6/ES7/ES8/ES9/ES10/ES11',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2019-06-03 00:00:00'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/coin.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/liuxing.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.min.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/my.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">北城韩雨</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">ES6/ES7/ES8/ES9/ES10/ES11</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-04-21T16:00:00.000Z" title="发表于 2020-04-22 00:00:00">2020-04-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2019-06-02T16:00:00.000Z" title="更新于 2019-06-03 00:00:00">2019-06-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%8E%9F%E7%94%9FJs/">原生Js</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">10.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>44分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="ES6/ES7/ES8/ES9/ES10/ES11"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="环境的搭建"><a href="#环境的搭建" class="headerlink" title="环境的搭建"></a>环境的搭建</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">1.首先我们写的是ES6的语法</span><br><span class="line">2.在html里引入的js文件 是转换之后的 所以我们要用babel转换</span><br><span class="line">3.需要安装的包 npm install -g babel-cli  npm install --save-dev babel-preset-es2015 babel-cli</span><br><span class="line">4.然后在我们的根目录下输入文件夹 .babelrc文件</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">.babelrc文件 写的是json格式 主要就是告诉babel 我们用哪些插件  去转换</span><br><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;presets&quot;</span>:[</span><br><span class="line">        <span class="string">&quot;es2015&quot;</span></span><br><span class="line">    ],</span><br><span class="line">    <span class="string">&quot;plugins&quot;</span>: []</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">然后输入命令</span><br><span class="line">babel .\src\index.js -o .\dist\index.js</span><br><span class="line">src下的index.js 是你要转换的文件</span><br><span class="line">dist文件夹下是你 转换完成的文件</span><br><span class="line"><span class="comment">// 我们本次转换 都需要这么输入文件  所以 我们用package.json 去设置脚本</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;name&quot;</span>: <span class="string">&quot;ES6&quot;</span>,</span><br><span class="line">  <span class="string">&quot;version&quot;</span>: <span class="string">&quot;1.0.0&quot;</span>,</span><br><span class="line">  <span class="string">&quot;description&quot;</span>: <span class="string">&quot;ES6学习&quot;</span>,</span><br><span class="line">  <span class="string">&quot;main&quot;</span>: <span class="string">&quot;index.js&quot;</span>,</span><br><span class="line">  <span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;test&quot;</span>: <span class="string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>,</span><br><span class="line">    <span class="comment">//设置命令脚本    </span></span><br><span class="line">    <span class="string">&quot;babel&quot;</span>:<span class="string">&quot;babel ./src/index.js -o ./dist/index.js&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;keywords&quot;</span>: [],</span><br><span class="line">  <span class="string">&quot;author&quot;</span>: <span class="string">&quot;wangzheng&quot;</span>,</span><br><span class="line">  <span class="string">&quot;license&quot;</span>: <span class="string">&quot;ISC&quot;</span>,</span><br><span class="line">  <span class="string">&quot;devDependencies&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;babel-cli&quot;</span>: <span class="string">&quot;^6.26.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;babel-preset-es2015&quot;</span>: <span class="string">&quot;^6.24.1&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="声明方式"><a href="#声明方式" class="headerlink" title="声明方式"></a>声明方式</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>我们原来的声明方式 是用<span class="keyword">var</span> 去声明 但是随着前端工程化的开发 <span class="keyword">var</span> 会污染我们的全局变量</span><br><span class="line"><span class="number">2.</span>所有又了<span class="keyword">let</span> 和 <span class="keyword">const</span> 两种声明方式</span><br><span class="line"><span class="number">3.</span><span class="keyword">let</span> </span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> 声明方式</span><br><span class="line"><span class="keyword">let</span> 的这种声明方式我们可以理解为局部声明</span><br><span class="line"><span class="keyword">let</span> 不能重复声明 而<span class="keyword">var</span> 可以</span><br><span class="line"><span class="keyword">var</span> a = <span class="string">&#x27;wangzheng&#x27;</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">let</span> a = <span class="string">&#x27;hanyu&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(a)  <span class="comment">//输出是 wangzheng</span></span><br><span class="line">输出的是 <span class="string">&#x27;wangzheng&#x27;</span> 可以看到 我们的<span class="keyword">let</span> a 是在&#123;&#125;里面声明的(这里花括号里面就相当与一个作用域) 所以外部的<span class="built_in">console</span>.log是访问不到的</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//let 声明的变量都块级作用域  只在代码块里面有效</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">let</span> a = <span class="string">&#x27;你好&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">if</span>()&#123;&#125; <span class="keyword">else</span>&#123;&#125; <span class="keyword">while</span>&#123;&#125; <span class="keyword">for</span></span><br><span class="line">不存在变量提升</span><br><span class="line"><span class="comment">//不影响作用域链 </span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">let</span> school = <span class="string">&#x27;学校&#x27;</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(school)</span><br><span class="line">    &#125;</span><br><span class="line">    fn() <span class="comment">//输出 学校 函数取向上找school这个变量</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span><span class="keyword">const</span> 声明的时候一定要赋初始值</span><br><span class="line"><span class="number">2.</span> 常量值不能修改</span><br><span class="line"><span class="number">3.</span>也是块级作用域</span><br><span class="line"><span class="keyword">const</span> 声明方式</span><br><span class="line"><span class="keyword">const</span> 是一种常量声明  声明完之后 是不能赋值 和改变的 针对于对象 我们是可以改变值 </span><br><span class="line">所以这里理解为 <span class="keyword">const</span> 声明的对象 指针是不可以改变的 </span><br></pre></td></tr></table></figure>
<h2 id="变量的解构赋值"><a href="#变量的解构赋值" class="headerlink" title="变量的解构赋值"></a>变量的解构赋值</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">就是按照一定的格式 去解构赋值</span><br><span class="line"><span class="number">1.</span>数组的解构赋值</span><br><span class="line"><span class="number">2.</span>对象的解构赋值</span><br><span class="line"><span class="number">3.</span>字符串的解构赋值</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">数组的解构赋值 左边的结构和右边的结构要一致</span><br><span class="line"><span class="keyword">let</span> [a,b,c] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="built_in">console</span>.log(a,b,c) <span class="comment">//输出 1 , 2 , 3</span></span><br><span class="line">默认值</span><br><span class="line"><span class="keyword">let</span> [foo = <span class="string">&#x27;123&#x27;</span>] = []</span><br><span class="line"><span class="built_in">console</span>.log(foo)  <span class="comment">//输出 默认值 是123</span></span><br><span class="line"><span class="keyword">let</span> [a,b=<span class="string">&#x27;你好&#x27;</span>] = [<span class="string">&#x27;好的&#x27;</span>]</span><br><span class="line"><span class="built_in">console</span>.log(a,b) 输出是 你好  b因为有默认值 输出是 好的</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">对象的解构赋值</span><br><span class="line"><span class="keyword">let</span> &#123;foo,bar&#125; = &#123;<span class="attr">foo</span>:<span class="string">&#x27;你好&#x27;</span>,<span class="attr">bar</span>:<span class="string">&#x27;好的&#x27;</span>&#125;</span><br><span class="line"><span class="built_in">console</span>.log(foo,bar) <span class="comment">//输出  你好  好的</span></span><br><span class="line"><span class="keyword">let</span> foo </span><br><span class="line">(&#123;foo&#125; = &#123;<span class="attr">foo</span>:<span class="string">&#x27;你好&#x27;</span>&#125;) <span class="comment">//注意这里要加圆括号</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">字符串的解构</span><br><span class="line"><span class="keyword">const</span> [a,b,c,d] = <span class="string">&#x27;wang&#x27;</span></span><br><span class="line"><span class="built_in">console</span>.log(a,b,c,d) <span class="comment">//输出 w  a  n  g</span></span><br></pre></td></tr></table></figure>
<p>对象扩展运算符和rest运算符</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">对象扩展运算符 ... 当我们不知道 有多少参数传入进来的时候就可以用</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">...arg</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//这里的形参就可以用扩展运算符了</span></span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="keyword">let</span> arr2 = arr1</span><br><span class="line">arr.push(<span class="number">4</span>)</span><br><span class="line"><span class="comment">//这个时候 我们发现 arr1的值也会变 所以 如果我们完全希望得到arr1里面的值 就可以用拓展</span></span><br><span class="line"><span class="keyword">let</span> arr2 = [...arr1]</span><br><span class="line">arr2.push(<span class="number">4</span>) <span class="comment">//这样arr1的值就不会变了</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">rest 剩余运算符 当我的函数传入的形参 我不知道是多少个的时候就可以用</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">first,...rest</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//这里 我们的fitst的值 是 0 </span></span><br><span class="line">    <span class="comment">//剩余我们的12345 都在我们的...rest 里 三个点 就表示吧剩余的形参放进了我们的rest形参里</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> val <span class="keyword">of</span> rest)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val) <span class="comment">//输出是 12345</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>)</span><br></pre></td></tr></table></figure>
<h2 id="字符串模板"><a href="#字符串模板" class="headerlink" title="字符串模板"></a>字符串模板</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>语法 就是反引号 你要渲染的变量 要用$&#123;变量&#125; </span><br><span class="line"><span class="number">2.</span>里面支持标签 和 运算</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//字符串查找</span></span><br><span class="line">ES5 </span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;你好么我很好&#x27;</span></span><br><span class="line"><span class="keyword">let</span> str1 = <span class="string">&#x27;我&#x27;</span></span><br><span class="line">str.indexOf(str1)</span><br><span class="line">ES6</span><br><span class="line">str.includes(str1) 返回就是 <span class="literal">true</span> 和 <span class="literal">false</span></span><br><span class="line">str.startsWith(str1) 看看开头有没有</span><br><span class="line">str.endsWith(str1) 看看结尾有没有</span><br><span class="line"><span class="comment">//字符串的复制</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;你好&#x27;</span></span><br><span class="line">str.repeat(<span class="number">3</span>) <span class="comment">//输出结果 就是 你好你好你好  应用场景 就是打注释 或者 栅格符</span></span><br></pre></td></tr></table></figure>
<h2 id="数字的操作"><a href="#数字的操作" class="headerlink" title="数字的操作"></a>数字的操作</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>声明二进制数据 和 八进制 都是以<span class="number">0</span>开头的</span><br><span class="line"><span class="keyword">let</span> binary = <span class="number">0</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//判断 一个数 是不是数字</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="number">11</span>/<span class="number">4</span></span><br><span class="line"><span class="built_in">Number</span>.isFinite(a)  返回 <span class="literal">true</span></span><br><span class="line"><span class="built_in">Number</span>.isNaN(<span class="literal">NaN</span>) 判断一个数 是不是 非数</span><br><span class="line"><span class="built_in">Number</span>.isInteger(<span class="number">123</span>) 判断一个数是不是整数</span><br><span class="line"><span class="built_in">Number</span>.MAX_SAFE_INTEGER <span class="comment">//js最大安全值 9007199254740991</span></span><br><span class="line"><span class="built_in">Number</span>.isSafeInteger() <span class="comment">//判断一个数 有没有超过js的最大安全整数</span></span><br></pre></td></tr></table></figure>
<h2 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> <span class="built_in">this</span> 指向是静态的  始终指向函数在声明时 所在 作用域下的 <span class="built_in">this</span> 的值</span><br><span class="line"><span class="number">2.</span>  不能作为 构造函数使用</span><br><span class="line"><span class="number">3.</span> 不能使用<span class="built_in">arguments</span>  变量  没有实参列表</span><br><span class="line"><span class="number">4.</span> 还能减写  当形参只有一个的时候 可以胜率小括号 当函数体只有一行的时候 可以省略花括号</span><br><span class="line"><span class="number">5.</span> 箭头函数 不适合 和<span class="built_in">this</span>有关的回调 去使用 比如dom元素的事件回调</span><br><span class="line">ad.addEventListener(<span class="string">&#x27;cilck&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;这里就不适合使用箭头函数 使用之后<span class="built_in">this</span> 就指向<span class="built_in">window</span>了 拿不到当前的事件源&#125;)</span><br><span class="line">比如 对象的方法 也不适合</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getname</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)    </span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> getname1 = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">window</span>.name = <span class="string">&#x27;你好&#x27;</span></span><br><span class="line"><span class="keyword">const</span> school = &#123;</span><br><span class="line">    name:<span class="string">&#x27;nihao&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">getname() <span class="comment">//输出 你好</span></span><br><span class="line">getname1() <span class="comment">//输出 你好</span></span><br><span class="line"><span class="comment">//通过call 去改变 this的指向 去指向school</span></span><br><span class="line">getname().call(school) <span class="comment">// 输出是 nihao</span></span><br><span class="line">getname1().call(school) <span class="comment">// 而箭头函数 输出的还是 你好  //因为他是在window的作用域下生成的</span></span><br></pre></td></tr></table></figure>
<h2 id="迭代器"><a href="#迭代器" class="headerlink" title="迭代器"></a>迭代器</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>迭代器(iterator) 是一种接口 为各种不同的数据结构 提供统一的访问机制 任何数据结构 只要部署interator 就可以完成遍历 </span><br><span class="line"><span class="number">2.</span> ES6 创造了一种新的遍历命令 <span class="keyword">for</span> <span class="keyword">of</span> 循环 只要有 iterator接口的数据结构 都可以使用 <span class="keyword">for</span> <span class="keyword">of</span> 循环遍历</span><br><span class="line"><span class="number">3.</span> 原生具备interator接口的数据 <span class="built_in">Array</span> Arguments <span class="built_in">Set</span> <span class="built_in">Map</span> <span class="built_in">String</span> TypedArray NodeList</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">迭代器的应用 用来自定义遍历数据 也就是按照我们自己的意愿 去遍历</span><br><span class="line"><span class="keyword">const</span> banji = &#123;</span><br><span class="line">    name:<span class="string">&#x27;终极一班&#x27;</span>,</span><br><span class="line">    stus:[</span><br><span class="line">        <span class="string">&#x27;xiaoming&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;xiaoning&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;xiaotian&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;knight&#x27;</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> val <span class="keyword">of</span> banji)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(val) <span class="comment">//报错  banji is not iterableat</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//因为了个班级的对象是我们自己定义的 我们也没有部署 interator接口 所以 使用for of 遍历不了</span></span><br><span class="line">现在要按照自己的意愿 去遍历 stus 每次只返回一个</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">const</span> banji = &#123;</span><br><span class="line">    name:<span class="string">&#x27;终极一班&#x27;</span>,</span><br><span class="line">    stus:[</span><br><span class="line">        <span class="string">&#x27;xiaoming&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;xiaoning&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;xiaotian&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;knight&#x27;</span></span><br><span class="line">    ],</span><br><span class="line">    <span class="comment">//先部署接口 </span></span><br><span class="line">    [<span class="built_in">Symbol</span>.iterator]()&#123;</span><br><span class="line">        <span class="keyword">let</span> index = <span class="number">0</span></span><br><span class="line">        <span class="keyword">let</span> _this = <span class="built_in">this</span></span><br><span class="line">        <span class="comment">//接口必须返回一个对象</span></span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="comment">//对象里面必须设置一个next的函数</span></span><br><span class="line">            next:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(index &lt; _this.stus.length)&#123;</span><br><span class="line">                    <span class="comment">//返回的值就是这些 done 就是结束的</span></span><br><span class="line">                    <span class="keyword">const</span> res = &#123;<span class="attr">value</span>: _this.stus[index],<span class="attr">done</span>:<span class="literal">false</span>&#125;</span><br><span class="line">                    index++</span><br><span class="line">                    <span class="keyword">return</span> res</span><br><span class="line">                &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                    <span class="keyword">return</span> &#123;<span class="attr">value</span>:<span class="string">&#x27;undefined&#x27;</span>,<span class="attr">done</span>:<span class="literal">true</span>&#125;</span><br><span class="line">                &#125;  </span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//然后就可以调用for of 循环去遍历了</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> val <span class="keyword">of</span> banji)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(val)</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="生成器函数"><a href="#生成器函数" class="headerlink" title="生成器函数"></a>生成器函数</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//生成器其实就是一个特殊的函数 异步编程 纯回调函数 一种新的解决方案</span></span><br><span class="line"><span class="number">1.</span>声明方式</span><br><span class="line"><span class="function"><span class="keyword">function</span> * <span class="title">gen</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"><span class="number">2.</span>结果不会立即输出</span><br><span class="line"><span class="function"><span class="keyword">function</span> * <span class="title">gen</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="string">&#x27;hello gennerator&#x27;</span>) &#125;</span><br><span class="line"><span class="keyword">let</span> interator = gen() <span class="comment">//gen &#123;&lt;suspended&gt;&#125; 输出这个东西 一个迭代器对象 有一个next 方法可以执行里面的函数</span></span><br><span class="line">interator.next() <span class="comment">//输出了上面的函数体的内容</span></span><br><span class="line"><span class="number">3.</span>生成器函数里面 可以写 <span class="keyword">yield</span> 语句 <span class="keyword">yield</span> 就是把生成器代码分割 然后使用next 去执行</span><br><span class="line"><span class="function"><span class="keyword">function</span> * <span class="title">gen</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">111</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;------&#x27;</span>    <span class="comment">//分割代码 现在写了三个yield 把代码分割成了四块</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">222</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;------&#x27;</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">333</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;------&#x27;</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">444</span>)</span><br><span class="line"> &#125;</span><br><span class="line"><span class="keyword">let</span> interator = gen() <span class="comment">//</span></span><br><span class="line">interator.next() <span class="comment">//这里首先输出 yield的分割第一段代码 也就是会输出 111 返回值是一个对象 &#123;value:&#x27;yield语句&#x27;,done:false&#125;</span></span><br><span class="line">interator.next()  <span class="comment">//执行第二段被分割的代码 输出 222  以此类推</span></span><br><span class="line"><span class="comment">//生成器 函数 可以使用 for of 去遍历</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">of</span> gen())&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(key) <span class="comment">//这里输出的是yield 里面写的语句 </span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="生成器函数的参数传递"><a href="#生成器函数的参数传递" class="headerlink" title="生成器函数的参数传递"></a>生成器函数的参数传递</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> * <span class="title">gen</span>(<span class="params">arg</span>)</span>&#123; </span><br><span class="line">    <span class="built_in">console</span>.log(arg)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;------&#x27;</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">222</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;------&#x27;</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">333</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;------&#x27;</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">444</span>)</span><br><span class="line"> &#125;</span><br><span class="line"><span class="keyword">let</span> interator = gen(<span class="string">&#x27;AAA&#x27;</span>) <span class="comment">//</span></span><br><span class="line">interator.next() <span class="comment">//打印输出 &#x27;AAA&#x27;</span></span><br><span class="line"><span class="built_in">console</span>.log(interator.next())</span><br><span class="line"><span class="comment">//next 方法 可以传递实参</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> * <span class="title">gen</span>(<span class="params">arg</span>)</span>&#123; </span><br><span class="line">    <span class="built_in">console</span>.log(arg)</span><br><span class="line">    <span class="keyword">yield</span> <span class="number">111</span></span><br><span class="line">    <span class="keyword">let</span> one = <span class="keyword">yield</span> <span class="number">111</span>  </span><br><span class="line">    <span class="built_in">console</span>.log(one)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;我是第二个yield&#x27;</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">333</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;我是第三个yield&#x27;</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">444</span>)</span><br><span class="line"> &#125;</span><br><span class="line"><span class="keyword">let</span> interator = gen(<span class="string">&#x27;AAA&#x27;</span>) <span class="comment">//</span></span><br><span class="line"><span class="built_in">console</span>.log(interator.next())</span><br><span class="line"><span class="built_in">console</span>.log(interator.next(<span class="string">&#x27;BBB&#x27;</span>))  <span class="comment">//每次next传递的参数将是上一个yield的返回值</span></span><br><span class="line"><span class="built_in">console</span>.log(interator.next())</span><br></pre></td></tr></table></figure>
<h2 id="生成器函数实例"><a href="#生成器函数实例" class="headerlink" title="生成器函数实例"></a>生成器函数实例</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//生成器函数就是为了解决异步变成中的回调地狱 </span></span><br><span class="line">1s 输出 <span class="number">111</span> 2s输出<span class="number">222</span> 3s 后输出 <span class="number">333</span>  下面就是用定时器的写法 如果业务代码很长的话 就不是很好维护</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="number">111</span>)</span><br><span class="line">            <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="number">222</span>)</span><br><span class="line">            <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="number">333</span>)  </span><br><span class="line">        &#125;,<span class="number">3000</span>)</span><br><span class="line">        &#125;,<span class="number">2000</span>)</span><br><span class="line">        &#125;,<span class="number">1000</span>)</span><br><span class="line"><span class="comment">//生成器函数 写法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">one</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="number">111</span>)</span><br><span class="line">        <span class="comment">//2.然后在调用下一个two函数</span></span><br><span class="line">        interator.next()</span><br><span class="line">    &#125;,<span class="number">1000</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">two</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="number">222</span>)</span><br><span class="line">        <span class="comment">//3.调用three函数</span></span><br><span class="line">        interator.next()</span><br><span class="line">    &#125;,<span class="number">2000</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">three</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="number">333</span>)</span><br><span class="line">    &#125;,<span class="number">3000</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> * <span class="title">gen</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">yield</span> one()</span><br><span class="line">    <span class="keyword">yield</span> two()</span><br><span class="line">    <span class="keyword">yield</span> three()</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> interator = gen()</span><br><span class="line"><span class="comment">//1.先调用开始的函数 one</span></span><br><span class="line">interator.next()</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取用户数据 订单数据 商品数据 有先后顺序的</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUsers</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> data = <span class="string">&#x27;用户数据&#x27;</span></span><br><span class="line">        interator.next(data) <span class="comment">//这是第二次掉next 函数 会把你传递的参数 给第一个yield的语句的返回值</span></span><br><span class="line">    &#125;,<span class="number">1000</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getOrders</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> data = <span class="string">&#x27;订单数据&#x27;</span></span><br><span class="line">        interator.next(data) <span class="comment">//第三次调next 函数 会把你传递的参数 给第二个yield语句的返回值</span></span><br><span class="line">    &#125;,<span class="number">1000</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getGoods</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> data = <span class="string">&#x27;商品数据&#x27;</span></span><br><span class="line">    &#125;,<span class="number">1000</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> * <span class="title">gen</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> userData = <span class="keyword">yield</span> getUsers()</span><br><span class="line">    <span class="built_in">console</span>.log(userData) <span class="comment">//第二次调取next的传递的参数</span></span><br><span class="line">    <span class="keyword">const</span> ordersData = <span class="keyword">yield</span> getOrders()</span><br><span class="line">    <span class="built_in">console</span>.log(ordersData)</span><br><span class="line">    <span class="keyword">yield</span> getGoods()</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> interator =  gen()</span><br><span class="line">interator.next()</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span> 是一个构造函数 用来封装异步操作并可以获取其成功或失败的结果</span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//这是异步操作</span></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> data = <span class="string">&#x27;数据库中的用户数据&#x27;</span></span><br><span class="line">        resolve(data)</span><br><span class="line">        <span class="keyword">let</span> err = <span class="string">&#x27;读取失败&#x27;</span></span><br><span class="line">        rejject(err)</span><br><span class="line">    &#125;,<span class="number">1000</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//成功和失败不能同时存在 这里是为了掩饰清楚才这么写</span></span><br><span class="line">p.then(<span class="function"><span class="keyword">function</span>(<span class="params">成功的形参走第一个函数</span>)</span>&#123;&#125;,<span class="function"><span class="keyword">function</span>(<span class="params">失败的形参会走第二个函数</span>)</span>&#123;&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">then 方法 的返回结果 是promise 对象 </span><br><span class="line"><span class="number">1.</span>如果你在then方法里返回的是一个非promise对象类型 那么状态未成功  返回值 就是 你成功的值</span><br><span class="line"><span class="number">2.</span>如果是<span class="built_in">Promise</span> 对象  你接收的变量 还是要用then去使用</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">catch</span> 方法 用来指定<span class="built_in">Promise</span> 失败的方法</span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        reject(<span class="string">&#x27;失败了&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line">p.catch(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.warn(res)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="Promise-allSettled-和-Promise-all"><a href="#Promise-allSettled-和-Promise-all" class="headerlink" title="Promise.allSettled 和 Promise.all"></a>Promise.allSettled 和 Promise.all</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>可以用来返回多个<span class="built_in">Promise</span>对象的数组</span><br><span class="line"><span class="keyword">const</span> p1 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        resolve(<span class="string">&#x27;商品数据-1&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        resolve(<span class="string">&#x27;商品数据-2&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> res = <span class="built_in">Promise</span>.allSettled([p1,p2])</span><br><span class="line"><span class="built_in">console</span>.log(res)</span><br><span class="line"><span class="comment">//输出如下 整体式成功的 如果单个Promise 有失败的情况 下面的status字段就会从fulfilled 变成 rejected</span></span><br><span class="line">__proto__: <span class="built_in">Promise</span></span><br><span class="line">[[PromiseStatus]]: <span class="string">&quot;resolved&quot;</span></span><br><span class="line">[[PromiseValue]]: <span class="built_in">Array</span>(<span class="number">2</span>)</span><br><span class="line"><span class="number">0</span>: &#123;<span class="attr">status</span>: <span class="string">&quot;fulfilled&quot;</span>, <span class="attr">value</span>: <span class="string">&quot;商品数据-1&quot;</span>&#125;</span><br><span class="line"><span class="number">1</span>: &#123;<span class="attr">status</span>: <span class="string">&quot;fulfilled&quot;</span>, <span class="attr">value</span>: <span class="string">&quot;商品数据-2&quot;</span>&#125;</span><br><span class="line">length: <span class="number">2</span></span><br><span class="line">__proto__: <span class="built_in">Array</span>(<span class="number">0</span>)</span><br><span class="line"><span class="number">2.</span><span class="built_in">Promise</span>.all 和上面的相反 必须都成功 整体才成功 如果有一个失败的 整体就都失败了</span><br></pre></td></tr></table></figure>
<h2 id="可选连操作符"><a href="#可选连操作符" class="headerlink" title="可选连操作符"></a>可选连操作符</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>用于深层的对象取值 </span><br><span class="line"><span class="comment">//如下 我们想把config的db里的hostq取值出来 </span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">main</span>(<span class="params">config</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">const</span> host = </span><br><span class="line">&#125;</span><br><span class="line">main(&#123;</span><br><span class="line">    db:&#123;</span><br><span class="line">        host:<span class="string">&#x27;1111&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    cath:&#123;</span><br><span class="line">        host:<span class="string">&#x27;222&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//传统做法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">main</span>(<span class="params">config</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//这里 如果你没传入config就会报错</span></span><br><span class="line">    <span class="keyword">const</span> host = config &amp;&amp; config.db &amp;&amp; config.host</span><br><span class="line">    <span class="built_in">console</span>.log(host)</span><br><span class="line">&#125;</span><br><span class="line">main(&#123;</span><br><span class="line">    db:&#123;</span><br><span class="line">        host:<span class="string">&#x27;1111&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    cath:&#123;</span><br><span class="line">        host:<span class="string">&#x27;222&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 可选连操作符</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">main</span>(<span class="params">config</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//先看看 你config有没有 在看看 有没有db 在看又没有host 如果你下面的没有传入 那么就式undefined不会报错 阻碍程序运行 </span></span><br><span class="line">    <span class="keyword">const</span> host = config?.db?.host</span><br><span class="line">    <span class="built_in">console</span>.log(host)</span><br><span class="line">&#125;</span><br><span class="line">main(&#123;</span><br><span class="line">    db:&#123;</span><br><span class="line">        host:<span class="string">&#x27;1111&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    cath:&#123;</span><br><span class="line">        host:<span class="string">&#x27;222&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)    </span><br></pre></td></tr></table></figure>
<h2 id="数组的操作"><a href="#数组的操作" class="headerlink" title="数组的操作"></a>数组的操作</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span><span class="built_in">JSON</span>的数组格式</span><br><span class="line"><span class="keyword">let</span> json = &#123;<span class="string">&#x27;0&#x27;</span>:<span class="string">&#x27;我是0&#x27;</span>,<span class="string">&#x27;1&#x27;</span>:<span class="string">&#x27;我是1&#x27;</span>,<span class="string">&#x27;2&#x27;</span>:<span class="string">&#x27;我是2&#x27;</span>, <span class="attr">length</span>:<span class="number">3</span>&#125; <span class="comment">//json 的数组格式</span></span><br><span class="line"><span class="comment">//也可以把伪数组变成数组</span></span><br><span class="line"><span class="keyword">const</span> arr = <span class="built_in">Array</span>.from(json) <span class="comment">//输出就是 [&#x27;我是0&#x27;,我是1&#x27;,&#x27;我是2&#x27;] </span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Array</span>.from(<span class="string">&#x27;foo&#x27;</span>));</span><br><span class="line"><span class="comment">// expected output: Array [&quot;f&quot;, &quot;o&quot;, &quot;o&quot;]</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Array</span>.from([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="function"><span class="params">x</span> =&gt;</span> x + x));</span><br><span class="line"><span class="comment">// expected output: Array [2, 4, 6]</span></span><br><span class="line"><span class="number">2.</span>把字符串转成数组 也可以字节传换字符串</span><br><span class="line"><span class="keyword">let</span> arr = <span class="built_in">Array</span>.of(<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>)  <span class="comment">//输出 就是 [2,3,4,5]</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">find() 实例方法 用于查找数组里的某个元素 返回值  是当前满足条件的元素</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]</span><br><span class="line">arr.find(<span class="function">(<span class="params">val,index,arr</span>) =&gt;</span> &#123;</span><br><span class="line">    val 就是数组的每个值</span><br><span class="line">    index 每个值的索引</span><br><span class="line">    arr 数组本身</span><br><span class="line">    <span class="keyword">return</span> val &gt; <span class="number">5</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">fill() 数组的填充替换方法 IE <span class="number">11</span> 及更早版本不支持 fill() 方法。 会改变原有数组</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">&#x27;你好&#x27;</span>,<span class="string">&#x27;好的&#x27;</span>,<span class="string">&#x27;再见&#x27;</span>]</span><br><span class="line"><span class="comment">//这里的位置 就是 单纯我们的看见数组的个数 而不是下标</span></span><br><span class="line">arr.finll(<span class="string">&#x27;你要替换成什么&#x27;</span>,<span class="string">&#x27;开始替换的位置&#x27;</span>,<span class="string">&#x27;结束填充的位置&#x27;</span>)</span><br><span class="line"><span class="keyword">var</span> fruits = [<span class="string">&quot;Banana&quot;</span>, <span class="string">&quot;Orange&quot;</span>, <span class="string">&quot;Apple&quot;</span>, <span class="string">&quot;Mango&quot;</span>];</span><br><span class="line">fruits.fill(<span class="string">&quot;Runoob&quot;</span>, <span class="number">2</span>, <span class="number">4</span>); <span class="comment">//从第二个之后开始替换 一致替换到第四个</span></span><br><span class="line"><span class="comment">//输出 Banana,Orange,Runoob,Runoob</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> arr)&#123;&#125; 循环 可以遍历字符串 映射Maps <span class="built_in">Set</span>集合等数据解构</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> arr) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(item) <span class="comment">//数组的每个值</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> fruits = [<span class="string">&quot;Banana&quot;</span>, <span class="string">&quot;Orange&quot;</span>, <span class="string">&quot;Apple&quot;</span>, <span class="string">&quot;Mango&quot;</span>];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> fruits.keys())&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(item) <span class="comment">//用keys方法 输出了数组的索引</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//使用了 entries 来输出了索引的数组的索引 和每个元素</span></span><br><span class="line"><span class="keyword">var</span> fruits = [<span class="string">&quot;Banana&quot;</span>, <span class="string">&quot;Orange&quot;</span>, <span class="string">&quot;Apple&quot;</span>, <span class="string">&quot;Mango&quot;</span>];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> [index,val] <span class="keyword">of</span> fruits.entries())&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(index,val)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> iterable = <span class="keyword">new</span> <span class="built_in">Map</span>([[<span class="string">&#x27;one&#x27;</span>, <span class="number">1</span>], [<span class="string">&#x27;two&#x27;</span>, <span class="number">2</span>]]);</span><br><span class="line"><span class="comment">//iterable的值</span></span><br><span class="line"> <span class="function"><span class="title">Map</span>(<span class="params"><span class="number">2</span></span>)</span> &#123;<span class="string">&quot;one&quot;</span> =&gt; <span class="number">1</span>, <span class="string">&quot;two&quot;</span> =&gt; <span class="number">2</span>&#125;</span><br><span class="line">[[Entries]]</span><br><span class="line"><span class="number">0</span>: &#123;<span class="string">&quot;one&quot;</span> =&gt; <span class="number">1</span>&#125;</span><br><span class="line"><span class="number">1</span>: &#123;<span class="string">&quot;two&quot;</span> =&gt; <span class="number">2</span>&#125;</span><br><span class="line">size: <span class="number">2</span></span><br><span class="line">__proto__: <span class="built_in">Map</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> [key, value] <span class="keyword">of</span> iterable) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`Key: <span class="subst">$&#123;key&#125;</span> and Value: <span class="subst">$&#123;value&#125;</span>`</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Output:</span></span><br><span class="line"><span class="comment">// Key: one and Value: 1</span></span><br><span class="line"><span class="comment">// Key: two and Value: 2</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> iterable = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">1</span>]);</span><br><span class="line"> </span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> value <span class="keyword">of</span> iterable) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Output:</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">entries()  数组方法</span><br><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;你好&#x27;</span>,<span class="string">&#x27;好的&#x27;</span>,<span class="string">&#x27;再见&#x27;</span>]</span><br><span class="line"><span class="keyword">let</span> list = arr.entrise() <span class="comment">//这里生成的值是看不到 但是在循环中可以起作用 暂时可以理解为 生成了一个由索引和元素组组成的新数组</span></span><br><span class="line">[<span class="number">0</span>,<span class="string">&#x27;你好&#x27;</span>] [<span class="number">1</span>,<span class="string">&#x27;好的&#x27;</span>] [<span class="number">2</span>,<span class="string">&#x27;再见&#x27;</span>] </span><br><span class="line"><span class="comment">//会把数组生成一个 ArrayIterator&#123;&#125; 支持我们的手动循环</span></span><br><span class="line">list.next().value <span class="comment">//手动循环 [0,&#x27;你好&#x27;]</span></span><br><span class="line"><span class="comment">//这里里的空隙 就可以写的别的操作</span></span><br><span class="line">list.next().value <span class="comment">//手动循环 [1,&#x27;好的&#x27;]</span></span><br><span class="line">list.next().value <span class="comment">//手动循环 [2,&#x27;再见&#x27;]</span></span><br></pre></td></tr></table></figure>
<h2 id="forEach"><a href="#forEach" class="headerlink" title="forEach"></a>forEach</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line">forEach(<span class="function">(<span class="params">item,index,arr</span>) =&gt;</span> &#123;&#125;) </span><br><span class="line"><span class="comment">//如果数字里面的元素 是基本数据类型 是改变不了原有数组的</span></span><br><span class="line"><span class="keyword">const</span> array = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line">array.forEach(<span class="function"><span class="params">ele</span> =&gt;</span> &#123;</span><br><span class="line">ele = ele * <span class="number">3</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(array); <span class="comment">// [1,2,3,4]</span></span><br><span class="line"><span class="comment">//如果数组里面是 复杂数据类型 比如对象 是可以改变的 因为保存的是指针</span></span><br><span class="line"><span class="keyword">const</span> objArr = [&#123;</span><br><span class="line">    name: <span class="string">&#x27;wxw&#x27;</span>,</span><br><span class="line">    age: <span class="number">22</span></span><br><span class="line">&#125;, &#123;</span><br><span class="line">    name: <span class="string">&#x27;wxw2&#x27;</span>,</span><br><span class="line">    age: <span class="number">33</span></span><br><span class="line">&#125;]</span><br><span class="line">objArr.forEach(<span class="function"><span class="params">ele</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (ele.name === <span class="string">&#x27;wxw2&#x27;</span>) &#123;</span><br><span class="line">        ele.age = <span class="number">88</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(objArr); <span class="comment">// [&#123;name: &quot;wxw&quot;, age: 22&#125;,&#123;name: &quot;wxw2&quot;, age: 88&#125;]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//如果改变单个item也是改变不了的</span></span><br><span class="line"><span class="keyword">const</span> changeItemArr = [&#123;</span><br><span class="line">    name: <span class="string">&#x27;wxw&#x27;</span>,</span><br><span class="line">    age: <span class="number">22</span></span><br><span class="line">&#125;, &#123;</span><br><span class="line">    name: <span class="string">&#x27;wxw2&#x27;</span>,</span><br><span class="line">    age: <span class="number">33</span></span><br><span class="line">&#125;]</span><br><span class="line">changeItemArr.forEach(<span class="function"><span class="params">ele</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (ele.name === <span class="string">&#x27;wxw2&#x27;</span>) &#123;</span><br><span class="line">        <span class="comment">//单个对象的引用 没有改变指针 值 是改变不了的</span></span><br><span class="line">        ele = &#123;</span><br><span class="line">            name: <span class="string">&#x27;change&#x27;</span>,</span><br><span class="line">            age: <span class="number">77</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(changeItemArr); <span class="comment">// [&#123;name: &quot;wxw&quot;, age: 22&#125;,&#123;name: &quot;wxw2&quot;, age: 33&#125;]</span></span><br><span class="line"><span class="comment">//如果非要改变 就只能通过索引去改变了</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 基本类型可以欧~</span></span><br><span class="line"><span class="keyword">const</span> numArr = [<span class="number">33</span>,<span class="number">4</span>,<span class="number">55</span>];</span><br><span class="line">numArr.forEach(<span class="function">(<span class="params">ele, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (ele === <span class="number">33</span>) &#123;</span><br><span class="line">        arr[index] = <span class="number">999</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(numArr);  <span class="comment">// [999, 4, 55]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 引用类型也可以欧~</span></span><br><span class="line"><span class="keyword">const</span> allChangeArr = [&#123;</span><br><span class="line">    name: <span class="string">&#x27;wxw&#x27;</span>,</span><br><span class="line">    age: <span class="number">22</span></span><br><span class="line">&#125;, &#123;</span><br><span class="line">    name: <span class="string">&#x27;wxw2&#x27;</span>,</span><br><span class="line">    age: <span class="number">33</span></span><br><span class="line">&#125;]</span><br><span class="line">allChangeArr.forEach(<span class="function">(<span class="params">ele, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (ele.name === <span class="string">&#x27;wxw2&#x27;</span>) &#123;</span><br><span class="line">        arr[index] = &#123;</span><br><span class="line">            name: <span class="string">&#x27;change&#x27;</span>,</span><br><span class="line">            age: <span class="number">77</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="filter"><a href="#filter" class="headerlink" title="filter"></a>filter</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//有返回值 返回值是满足条件的新数组 这里改变数组的和上面的forEach 一样</span></span><br><span class="line">注意： filter() 不会对空数组进行检测。</span><br><span class="line">注意： filter() 不会改变原始数组。</span><br><span class="line"> <span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">7</span>]</span><br><span class="line"><span class="built_in">console</span>.log(arr.filter(<span class="function"><span class="params">item</span> =&gt;</span> item &gt;<span class="number">3</span>))  <span class="comment">// [4,5,6]  这里如果没有符合条件的 想返回空的数组</span></span><br></pre></td></tr></table></figure>
<h2 id="some"><a href="#some" class="headerlink" title="some"></a>some</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。</span><br><span class="line">some() 方法会依次执行数组的每个元素：</span><br><span class="line">如果有一个元素满足条件，则表达式返回<span class="literal">true</span> , 剩余的元素不会再执行检测。</span><br><span class="line">如果没有满足条件的元素，则返回<span class="literal">false</span>。</span><br><span class="line">注意： some() 不会对空数组进行检测。</span><br><span class="line">注意： some() 不会改变原始数组。</span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">7</span>]</span><br><span class="line"><span class="built_in">console</span>.log(arr.filter(<span class="function"><span class="params">item</span> =&gt;</span> item == <span class="number">3</span>))  输出为<span class="literal">true</span> 看看数组中有没有等于<span class="number">3</span>的元素存在</span><br></pre></td></tr></table></figure>
<h2 id="map"><a href="#map" class="headerlink" title="map"></a>map</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。</span><br><span class="line">map() 方法按照原始数组元素顺序依次处理元素。</span><br><span class="line">注意： map() 不会对空数组进行检测。</span><br><span class="line">注意： map() 不会改变原始数组。</span><br><span class="line">map 会返回一个信的数组 数组里面都是满足你条田的值 如果不满足 新的数组的每个元素就会返回undefind</span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">7</span>]</span><br><span class="line"><span class="built_in">console</span>.log(arr.map(<span class="function"><span class="params">item</span> =&gt;</span> item &gt; <span class="number">3</span>)) <span class="comment">//[false,false,false,true,true,true]</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">7</span>]</span><br><span class="line"><span class="built_in">console</span>.log(arr.map(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span>(item &gt;<span class="number">3</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> item </span><br><span class="line">    &#125;</span><br><span class="line">&#125;))   <span class="comment">// [undefined, undefined, undefined, 4, 5, 7]</span></span><br><span class="line"><span class="comment">//可以理解为一种替换</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">7</span>]</span><br><span class="line"><span class="built_in">console</span>.log(arr.map(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;你好&#x27;</span></span><br><span class="line">&#125;))   <span class="comment">// [&quot;你好&quot;, &quot;你好&quot;, &quot;你好&quot;, &quot;你好&quot;, &quot;你好&quot;, &quot;你好&quot;]</span></span><br></pre></td></tr></table></figure>
<h2 id="includes-ES7"><a href="#includes-ES7" class="headerlink" title="includes ES7"></a>includes ES7</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>用来判断数组种包含不包含某个元素 如果包含 返回<span class="literal">true</span> 如果不包含 返回<span class="literal">false</span></span><br><span class="line"><span class="keyword">const</span> mingzhu = [<span class="string">&#x27;西游记&#x27;</span>,<span class="string">&#x27;红楼梦&#x27;</span>,<span class="string">&#x27;三国演义&#x27;</span>,<span class="string">&#x27;水浒传&#x27;</span>]</span><br><span class="line"><span class="built_in">console</span>.log(mizhu.includes(<span class="string">&#x27;西游记&#x27;</span>)) 返回为<span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h2 id="flat-和-flatMap-ES10"><a href="#flat-和-flatMap-ES10" class="headerlink" title="flat 和 flatMap ES10"></a>flat 和 flatMap ES10</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>用来降低数组的维度 比如三维数组 转 二维数组 </span><br><span class="line"><span class="comment">//二维数组 转 一维</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,[<span class="number">5</span>,<span class="number">6</span>]]</span><br><span class="line"><span class="built_in">console</span>.log(arr.flat()) <span class="comment">//输出结果(6) [1, 2, 3, 4, 5, 6]</span></span><br><span class="line"><span class="comment">//三维 转 二维</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,[<span class="number">5</span>,<span class="number">6</span>,[<span class="number">7</span>,<span class="number">8</span>]]]</span><br><span class="line"><span class="built_in">console</span>.log(arr.flat()) <span class="comment">//输出结果(6) [1, 2, 3, 4, 5, 6,[7,8]]</span></span><br><span class="line"><span class="comment">//如果想把三维转以为 可以在参数里输入深度</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,[<span class="number">5</span>,<span class="number">6</span>,[<span class="number">7</span>,<span class="number">8</span>]]]</span><br><span class="line"><span class="comment">//这里输入深度即可</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.flat(<span class="number">2</span>)) <span class="comment">//输出结果(6) [1, 2, 3, 4, 5, 6,7,8]</span></span><br><span class="line"><span class="number">2.</span>把flatMap 把遍历之后的形成的 二维数组降低维度</span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="keyword">const</span> res = arr.map( <span class="function"><span class="params">item</span> =&gt;</span> item * <span class="number">10</span>) <span class="comment">//res [10,20,30]</span></span><br><span class="line"><span class="keyword">const</span> res = arr.map( <span class="function"><span class="params">item</span> =&gt;</span> [item * <span class="number">10</span>])  <span class="comment">//res [[10],[20],[30]]</span></span><br><span class="line"><span class="comment">//如果此时我想把上面产生的数组的维度降低</span></span><br><span class="line"><span class="keyword">const</span> res = arr.flatMap(<span class="function"><span class="params">item</span> =&gt;</span> [item * <span class="number">10</span>])<span class="comment">//res [10,20,30]</span></span><br></pre></td></tr></table></figure>
<h2 id="字符串的方法-trimStart-和-trimEnd"><a href="#字符串的方法-trimStart-和-trimEnd" class="headerlink" title="字符串的方法 trimStart() 和 trimEnd()"></a>字符串的方法 trimStart() 和 trimEnd()</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>主要用来清楚一个字符串左右的空白 trim是清除 两侧的</span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;    i  love you  &#x27;</span></span><br><span class="line"><span class="built_in">console</span>.log(str.trim())  <span class="comment">//两侧全部清楚</span></span><br><span class="line"><span class="built_in">console</span>.log(str.trimStart()) <span class="comment">//清除了开始</span></span><br><span class="line"><span class="built_in">console</span>.log(str.trimEnd()) <span class="comment">//清除了结束</span></span><br></pre></td></tr></table></figure>
<h2 id="async-和-await-ES8"><a href="#async-和-await-ES8" class="headerlink" title="async 和 await ES8"></a>async 和 await ES8</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span><span class="keyword">async</span> 函数 的返回值 为<span class="built_in">Promise</span> 对象</span><br><span class="line"><span class="number">2.</span><span class="built_in">Promise</span>对象的结果由<span class="keyword">async</span> 函数执行的返回值决定</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;你好&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> res = fn()</span><br><span class="line"><span class="built_in">console</span>.log(res) <span class="comment">//这里输出是返回一个Promise对象 并不是&#x27;你好&#x27;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3.</span><span class="keyword">await</span> 必须写在<span class="keyword">async</span>函数里 </span><br><span class="line"><span class="keyword">await</span> 右侧 的表达式一般为promise对象</span><br><span class="line"><span class="keyword">await</span> 返回的是promise 成功的值</span><br><span class="line"><span class="keyword">await</span> 的promise 失败了 就会抛出异常 需要通过<span class="keyword">try</span> .catch 捕获去处理</span><br></pre></td></tr></table></figure>
<h2 id="Object-values-和-Object-entries-ES8"><a href="#Object-values-和-Object-entries-ES8" class="headerlink" title="Object.values 和 Object.entries ES8"></a>Object.values 和 Object.entries ES8</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.values()方法 返回一个给定对象所有可枚举属性值的数组</span><br><span class="line"><span class="keyword">const</span> school =&#123;</span><br><span class="line">    name:<span class="string">&#x27;学校&#x27;</span>,</span><br><span class="line">    cities:[<span class="string">&#x27;北京&#x27;</span>,<span class="string">&#x27;上海&#x27;</span>,<span class="string">&#x27;深圳&#x27;</span>],</span><br><span class="line">    xueke:[<span class="string">&#x27;美容美发&#x27;</span>,<span class="string">&#x27;挖掘机&#x27;</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//获取一个对象所有的键</span></span><br><span class="line"><span class="built_in">console</span>.log(school.keys()) <span class="comment">//输出 是一个对象所有的键名组成的数组</span></span><br><span class="line"><span class="built_in">console</span>.log(school.values())<span class="comment">//输出 是对象所有的键值 组成的数组</span></span><br><span class="line"><span class="built_in">Object</span>.entries() 方法 返回一个给定对象自身可便利属性的[key.value]的数组</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.entries(school)) <span class="comment">//输出结果是由 键 和键值 组成的数组</span></span><br><span class="line"><span class="built_in">Array</span>(<span class="number">3</span>)</span><br><span class="line"><span class="number">0</span>: (<span class="number">2</span>) [<span class="string">&quot;name&quot;</span>, <span class="string">&quot;学校&quot;</span>]</span><br><span class="line"><span class="number">1</span>: (<span class="number">2</span>) [<span class="string">&quot;cities&quot;</span>, <span class="built_in">Array</span>(<span class="number">3</span>)]</span><br><span class="line"><span class="number">2</span>: (<span class="number">2</span>) [<span class="string">&quot;xueke&quot;</span>, <span class="built_in">Array</span>(<span class="number">2</span>)]</span><br><span class="line">length: <span class="number">3</span></span><br><span class="line">__proto__: <span class="built_in">Array</span>(<span class="number">0</span>)</span><br><span class="line"><span class="comment">//这样的数据结构方便我们去创建map</span></span><br><span class="line"><span class="keyword">const</span> m = <span class="keyword">new</span> <span class="built_in">Map</span>(school) 这样就创建了一个map</span><br><span class="line">对象的属性描述对象</span><br><span class="line">我们在用<span class="built_in">Object</span>.create()创建对象的时候 可以对一个对象去表述 其中可以设置这个对象是否能克隆之类的</span><br><span class="line">所以可以用 <span class="built_in">Object</span>.getOwnPropertyDescriptors(school)</span><br><span class="line"><span class="comment">//输出是下面那样</span></span><br><span class="line">&#123;<span class="attr">name</span>: &#123;…&#125;, <span class="attr">cities</span>: &#123;…&#125;, <span class="attr">xueke</span>: &#123;…&#125;&#125;</span><br><span class="line">name:</span><br><span class="line">value: <span class="string">&quot;学校&quot;</span></span><br><span class="line">writable: <span class="literal">true</span></span><br><span class="line">enumerable: <span class="literal">true</span></span><br><span class="line">configurable: <span class="literal">true</span></span><br><span class="line">__proto__: <span class="built_in">Object</span></span><br><span class="line">cities:</span><br><span class="line">value: (<span class="number">3</span>) [<span class="string">&quot;北京&quot;</span>, <span class="string">&quot;上海&quot;</span>, <span class="string">&quot;深圳&quot;</span>]</span><br><span class="line">writable: <span class="literal">true</span></span><br><span class="line">enumerable: <span class="literal">true</span></span><br><span class="line">configurable: <span class="literal">true</span></span><br><span class="line">__proto__: <span class="built_in">Object</span></span><br><span class="line">xueke: &#123;<span class="attr">value</span>: <span class="built_in">Array</span>(<span class="number">2</span>), <span class="attr">writable</span>: <span class="literal">true</span>, <span class="attr">enumerable</span>: <span class="literal">true</span>, <span class="attr">configurable</span>: <span class="literal">true</span>&#125;</span><br><span class="line">__proto__: <span class="built_in">Object</span></span><br></pre></td></tr></table></figure>
<h2 id="函数的操作"><a href="#函数的操作" class="headerlink" title="函数的操作"></a>函数的操作</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span> (<span class="params">a,b = <span class="number">1</span></span>)</span>&#123;&#125; 形参可以设置默认值</span><br><span class="line"><span class="comment">//也可以获取到你传递参数的个数</span></span><br><span class="line">add.length <span class="comment">//这里是你传递实参的个数</span></span><br></pre></td></tr></table></figure>
<h2 id="对象和数组的函数解构"><a href="#对象和数组的函数解构" class="headerlink" title="对象和数组的函数解构"></a>对象和数组的函数解构</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;<span class="attr">a</span>:<span class="string">&#x27;你好&#x27;</span>,<span class="attr">b</span>:<span class="string">&#x27;再见&#x27;</span>&#125; </span><br><span class="line"><span class="comment">//现在要在函数里打印出来a和b 以前的写法肯定就是去循环 现在就可以用解构</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">&#123;a,b&#125;</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(a,b)  <span class="comment">//这个时候由于我们把对象解构了 所以就直接打印出来了</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">&#x27;你好&#x27;</span>,<span class="string">&#x27;好的&#x27;</span>,<span class="string">&#x27;再见&#x27;</span>]</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">a,b,c</span>)</span>&#123; <span class="built_in">console</span>.log(a,b,c) &#125;</span><br><span class="line">fn(...arr)</span><br></pre></td></tr></table></figure>
<h2 id="in的用法"><a href="#in的用法" class="headerlink" title="in的用法"></a>in的用法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//判断某个值 在不在 对象或者数组里</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">a</span>:<span class="string">&#x27;你好&#x27;</span>,<span class="attr">b</span>:<span class="string">&#x27;好的&#x27;</span>&#125; <span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span> <span class="keyword">in</span> obj) <span class="comment">//返回为true</span></span><br><span class="line"><span class="comment">//数组的判断是根据索引去判断 如果 你的数组每个值都是空的 那么返回为false</span></span><br><span class="line"><span class="keyword">let</span> arr = [,,,] <span class="comment">//数组是由长度的 但是每个元素都是空的</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> <span class="keyword">in</span> arr) 返回是 <span class="literal">false</span> </span><br></pre></td></tr></table></figure>
<h2 id="对象的key值构建"><a href="#对象的key值构建" class="headerlink" title="对象的key值构建"></a>对象的key值构建</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>当我们的对象不知道key 是什么的时候 可以采用key值构建</span><br><span class="line"><span class="keyword">let</span> key = <span class="string">&#x27;skill&#x27;</span> 假设这里skill字段就是后台取出来的</span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    [key] :<span class="string">&#x27;web&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj) <span class="comment">// obj&#123;skill:&#x27;web&#x27;&#125;</span></span><br></pre></td></tr></table></figure>
<h2 id="Object-is"><a href="#Object-is" class="headerlink" title="Object.is()"></a>Object.is()</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//判断两个值是否相等</span></span><br><span class="line"><span class="built_in">Object</span>.is() 方法  对两个对象 进行比较</span><br><span class="line"><span class="keyword">const</span> obj1 = &#123;<span class="attr">name</span>:<span class="string">&#x27;你好&#x27;</span>&#125;</span><br><span class="line"><span class="keyword">const</span> obj2 = &#123;<span class="attr">name</span>:<span class="string">&#x27;你好&#x27;</span>&#125;</span><br><span class="line"><span class="built_in">Object</span>.is(obj1.name,obj2.name) <span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(object.is(<span class="literal">NaN</span> === <span class="literal">NaN</span>)) <span class="comment">// 为true</span></span><br></pre></td></tr></table></figure>
<h2 id="Object-assign-合并对象"><a href="#Object-assign-合并对象" class="headerlink" title="Object.assign() 合并对象"></a>Object.assign() 合并对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj1 = &#123;<span class="attr">name</span>:<span class="string">&#x27;你好&#x27;</span>&#125;</span><br><span class="line"><span class="keyword">const</span> obj2 = &#123;<span class="attr">name1</span>:<span class="string">&#x27;你好1&#x27;</span>&#125;</span><br><span class="line"><span class="keyword">const</span> obj3 = &#123;<span class="attr">name2</span>:<span class="string">&#x27;你好2&#x27;</span>&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.assign(obj1,obj2,obj3)) <span class="comment">//输出&#123;name: &quot;你好&quot;, name1: &quot;你好1&quot;, name2: &quot;你好2&quot;&#125;</span></span><br><span class="line"><span class="built_in">console</span>.log(obj1) <span class="comment">//输出&#123;name: &quot;你好&quot;, name1: &quot;你好1&quot;, name2: &quot;你好2&quot;&#125; </span></span><br><span class="line"><span class="comment">//这里上面就相当于 把obj2 和 obj3 都向 obj1合并了</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.assign(&#123;&#125;,obj1,obj2,obj3)) <span class="comment">//改成这样就没问题了 obj1 就不会改变</span></span><br></pre></td></tr></table></figure>
<h2 id="Object-setPrototypeOf-设置原型对象"><a href="#Object-setPrototypeOf-设置原型对象" class="headerlink" title="Object.setPrototypeOf 设置原型对象"></a>Object.setPrototypeOf 设置原型对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> school = &#123;</span><br><span class="line">    name:<span class="string">&#x27;尚硅谷&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> cities = &#123;</span><br><span class="line">    xiaoqu:[<span class="string">&#x27;北京&#x27;</span>,<span class="string">&#x27;上海&#x27;</span>,<span class="string">&#x27;深圳&#x27;</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(school) <span class="comment">//看到原型应该是Object</span></span><br><span class="line"><span class="built_in">Object</span>.setPrototypeOf(school,cities) <span class="comment">//这里就设置了school的原型 为cities</span></span><br><span class="line"><span class="built_in">Object</span>.getPrototypeOf <span class="comment">// 获取原型对象</span></span><br></pre></td></tr></table></figure>
<h2 id="object-fromEntries-ES10"><a href="#object-fromEntries-ES10" class="headerlink" title="object.fromEntries  ES10"></a>object.fromEntries  ES10</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>用来创建一个对象</span><br><span class="line"><span class="number">2.</span>接收一个二维数组</span><br><span class="line"><span class="number">3.</span>和<span class="built_in">Object</span>.entries相反 <span class="built_in">Object</span>.entries是把对象转换为二维数组</span><br><span class="line"><span class="keyword">const</span> res = <span class="built_in">Object</span>.fromEntries([</span><br><span class="line">    [<span class="string">&#x27;name&#x27;</span>,<span class="string">&#x27;王正&#x27;</span>],</span><br><span class="line">    [<span class="string">&#x27;skill&#x27;</span>,<span class="string">&#x27;web,js,node&#x27;</span>]</span><br><span class="line">])</span><br><span class="line"><span class="built_in">console</span>.log(res)  <span class="comment">//输出对象 &#123;name: &quot;王正&quot;, skill: &quot;web,js,node&quot;&#125;	</span></span><br></pre></td></tr></table></figure>
<h2 id="Symbol-新增的数据类型"><a href="#Symbol-新增的数据类型" class="headerlink" title="Symbol 新增的数据类型"></a>Symbol 新增的数据类型</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span><span class="built_in">Symbol</span> 的值 是唯一的 用来解决变量命名冲突的问题</span><br><span class="line"><span class="number">2.</span><span class="built_in">Symbol</span> 值 不能与其他数据进行运算</span><br><span class="line"><span class="number">3.</span><span class="built_in">Symbol</span> 定义的对象属性不能使用<span class="keyword">for</span> <span class="keyword">in</span> 循环遍历出来 但是可以使用<span class="built_in">Reflect</span>.ownKeys 来获取对象所有的键名</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>是一种全局的原始数据</span><br><span class="line">数据类型的特点是唯一性，即使是用同一个变量生成的值也不相等。 括号里面是输入的你对这个<span class="built_in">Symbol</span>数据的描述详情</span><br><span class="line">如果想要获取描述详情 </span><br><span class="line"> <span class="keyword">let</span> id1 = <span class="built_in">Symbol</span>(<span class="string">&#x27;id&#x27;</span>); <span class="comment">//id1.description即可 就能获取你在创建Symbol的时候的描述</span></span><br><span class="line"> <span class="keyword">let</span> id2 = <span class="built_in">Symbol</span>(<span class="string">&#x27;id&#x27;</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(id1 == id2);  <span class="comment">//false</span></span><br><span class="line"><span class="built_in">Symbol</span> 数据类型的另一特点是隐藏性，<span class="keyword">for</span>···<span class="keyword">in</span>，object.keys() 不能访问</span><br><span class="line"> <span class="keyword">let</span> id = <span class="built_in">Symbol</span>(<span class="string">&quot;id&quot;</span>);</span><br><span class="line"> <span class="keyword">let</span> obj = &#123;</span><br><span class="line">  [id]:<span class="string">&#x27;symbol&#x27;</span></span><br><span class="line"> &#125;;</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">let</span> option <span class="keyword">in</span> obj)&#123;</span><br><span class="line">     <span class="built_in">console</span>.log(obj[option]); <span class="comment">//空</span></span><br><span class="line"> &#125;</span><br><span class="line">在创建symbol类型数据 时的参数只是作为标识使用，所以 <span class="built_in">Symbol</span>() 也是可以的</span><br><span class="line"><span class="comment">//用例 当不希望别人知道 对象里的一个值的时候</span></span><br><span class="line">比如下面 我不希望下面对象的age</span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">name</span>:<span class="string">&#x27;你好&#x27;</span>,<span class="attr">skill</span>:<span class="string">&#x27;web&#x27;</span>&#125;</span><br><span class="line"><span class="keyword">const</span> age = <span class="built_in">Symbol</span>()</span><br><span class="line">obj[age] = <span class="number">18</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">in</span> obj)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(obj[key]) <span class="comment">//这个时候 是输出不了18的</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Set-和-WeakSet-数据结构类型"><a href="#Set-和-WeakSet-数据结构类型" class="headerlink" title="Set 和 WeakSet 数据结构类型"></a>Set 和 WeakSet 数据结构类型</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="number">1.</span><span class="built_in">Set</span> 是一种数据解构 里面是数组 不允许有重复的值</span><br><span class="line"><span class="keyword">let</span> setArr = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">&#x27;你好&#x27;</span>,<span class="string">&#x27;好的&#x27;</span>,<span class="string">&#x27;web&#x27;</span>])</span><br><span class="line"><span class="built_in">console</span>.log(setArr) <span class="comment">//输出 &#123;&#x27;你好&#x27;,&#x27;好的&#x27;,&#x27;web&#x27;&#125;</span></span><br><span class="line"><span class="comment">//增加值</span></span><br><span class="line">setArr.add(<span class="string">&#x27;再见&#x27;</span>) <span class="comment">//追加一个值  delete删除</span></span><br><span class="line"><span class="comment">//查找</span></span><br><span class="line">setArr.has(<span class="string">&#x27;你好&#x27;</span>) <span class="comment">//返回true</span></span><br><span class="line"><span class="comment">//循环输出</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">of</span> setArr)&#123;<span class="built_in">console</span>.log(key)&#125;</span><br><span class="line">forEach 也可以</span><br><span class="line"><span class="comment">//长度用size</span></span><br><span class="line">setArr.size</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">WeakSet</span>() <span class="comment">//用来存放对象 不可以在括号里直接使用 要用add 添加</span></span><br><span class="line"><span class="keyword">let</span> weakObj = <span class="keyword">new</span> weakSet(&#123;<span class="attr">a</span>:<span class="string">&#x27;你好&#x27;</span>&#125;) <span class="comment">//报错</span></span><br><span class="line"><span class="comment">//只能通过add去添加</span></span><br><span class="line"><span class="keyword">let</span> weakObj = <span class="keyword">new</span> weakSet()</span><br><span class="line"><span class="keyword">const</span> obj = &#123;<span class="attr">name</span>:<span class="string">&#x27;你好&#x27;</span>&#125;</span><br><span class="line">weakObj.add(obj)</span><br><span class="line">weakObj <span class="comment">// WeakSet &#123;Object &#123;name:&#x27;你好&#x27;&#125;&#125;</span></span><br></pre></td></tr></table></figure>
<h2 id="set集合实践"><a href="#set集合实践" class="headerlink" title="set集合实践"></a>set集合实践</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">3</span>,<span class="number">2</span>,<span class="number">1</span>]</span><br><span class="line"><span class="number">1.</span>数组去重</span><br><span class="line"><span class="keyword">let</span> res = [...new <span class="built_in">Set</span>(arr)]</span><br><span class="line"><span class="number">2.</span>求交集</span><br><span class="line"><span class="keyword">let</span> arr2 = [<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">6</span>]</span><br><span class="line"><span class="keyword">let</span> res = [...new <span class="built_in">Set</span>(arr)].filter(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> s2 = <span class="keyword">new</span> <span class="built_in">Set</span>(arr2)</span><br><span class="line">    <span class="keyword">if</span>(s2.has(item))&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(res) <span class="comment">//输出 [4,5]</span></span><br><span class="line"><span class="number">3.</span>两个数组的并集</span><br><span class="line"><span class="keyword">let</span> union = [...new <span class="built_in">Set</span>([...arr,...arr2])]</span><br><span class="line"><span class="number">4.</span>差集 就是求两个数组里没有元素 如果数组<span class="number">1</span>里有<span class="number">123</span> 数组<span class="number">2</span>里有<span class="number">345</span> 两个数组共同的元素是<span class="number">3</span> 如果是数组<span class="number">1</span>差数组<span class="number">2</span> 就是<span class="number">45</span> 数组<span class="number">2</span>差数组<span class="number">1</span> 就是<span class="number">12</span></span><br><span class="line"><span class="keyword">let</span> diff = [...new <span class="built_in">Set</span>(arr).filter( <span class="function"><span class="params">item</span> =&gt;</span> !(<span class="keyword">new</span> <span class="built_in">Set</span>(arr2).has(item)))] </span><br><span class="line"><span class="built_in">console</span>.log(diff) <span class="comment">//返回结果是[1,2,3] 因为这几个元素 在数组arr2里是没有的</span></span><br></pre></td></tr></table></figure>
<h2 id="map数据结构类型"><a href="#map数据结构类型" class="headerlink" title="map数据结构类型"></a>map数据结构类型</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">JSON</span>的数据类型  </span><br><span class="line"><span class="keyword">let</span> json = &#123;<span class="attr">name</span> :<span class="string">&#x27;你好&#x27;</span>,<span class="attr">skill</span>:<span class="string">&#x27;web&#x27;</span>&#125;</span><br><span class="line"><span class="comment">//当我们访问json.name的时候 其实是要循环的 </span></span><br><span class="line">声明map</span><br><span class="line"><span class="keyword">let</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>()</span><br><span class="line">map.set(json,<span class="string">&#x27;iam&#x27;</span>) <span class="comment">//增加</span></span><br><span class="line"><span class="comment">//这里输出结果如下 就相当于 我们的json 为key  值 是iam</span></span><br><span class="line"><span class="built_in">console</span>.log(map) <span class="comment">// Map&#123; Object &#123;name:&#x27;你好&#x27;,skill:&#x27;web&#x27;&#125; =&gt; &#x27;iam&#x27;&#125;</span></span><br><span class="line">值和key 是可以相互灵活的</span><br><span class="line"><span class="comment">//取值</span></span><br><span class="line">map.get(json) <span class="comment">//输出 iam</span></span><br><span class="line"><span class="comment">//删除特定的值</span></span><br><span class="line">map.delete(json) </span><br><span class="line"><span class="comment">//删除全部</span></span><br><span class="line">map.clear()</span><br><span class="line"><span class="comment">// 有多少数据</span></span><br><span class="line">map.size</span><br><span class="line"><span class="comment">//查找</span></span><br><span class="line">map.has(json) <span class="comment">//返回 true 或者 false</span></span><br></pre></td></tr></table></figure>
<h2 id="proxy-代理"><a href="#proxy-代理" class="headerlink" title="proxy 代理"></a>proxy 代理</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>主要是增加 对象和函数 就相当于一个钩子函数 在真正的方法执行之前 先预处理</span><br><span class="line"><span class="keyword">let</span> obj = &#123; <span class="function"><span class="title">add</span>(<span class="params">val</span>)</span>&#123; <span class="keyword">return</span> val + <span class="number">100</span>&#125;,<span class="attr">name</span>:<span class="string">&#x27;I am king&#x27;</span>&#125;</span><br><span class="line"><span class="keyword">let</span> pro = <span class="keyword">new</span> <span class="built_in">Proxy</span>(&#123;这里写你要预处理的对象&#125;,&#123;这里写你要怎么预处理&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//当我们访问对象里面的key 的时候 会触发proxy 的 get方法</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="function"><span class="title">add</span>(<span class="params">val</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> va; + <span class="number">100</span></span><br><span class="line">    &#125;,</span><br><span class="line">    name: <span class="string">&#x27;I am King&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">let</span> pro = <span class="keyword">new</span> <span class="built_in">Proxy</span>(obj,&#123;</span><br><span class="line">    <span class="function"><span class="title">get</span>(<span class="params">target,key,prox</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(target) <span class="comment">//就是我们传进来的obj</span></span><br><span class="line">        <span class="built_in">console</span>.log(key) <span class="comment">//可以 就是当你pro.name的时候 访问的key</span></span><br><span class="line">        <span class="built_in">console</span>.log(prox) <span class="comment">//整个代理对象</span></span><br><span class="line">        <span class="keyword">return</span> target[key]</span><br><span class="line">    &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="built_in">console</span>.log(pro.name)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 当我们设置对象里面的值的时候 会触发 proxy的 set方法</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">            <span class="function"><span class="title">add</span>(<span class="params">val</span>)</span>&#123;</span><br><span class="line">                <span class="keyword">return</span> val + <span class="number">100</span></span><br><span class="line">            &#125;,</span><br><span class="line">            name: <span class="string">&#x27;I am King&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">let</span> pro = <span class="keyword">new</span> <span class="built_in">Proxy</span>(obj,&#123;</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">target,key,val</span>)</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(target)  <span class="comment">//就是我们传进来的obj</span></span><br><span class="line">                <span class="built_in">console</span>.log(key) <span class="comment">//可以 就是当你pro.name的时候 访问的key</span></span><br><span class="line">                <span class="built_in">console</span>.log(val) <span class="comment">//你设置的值</span></span><br><span class="line">                <span class="built_in">console</span>.log(receiver) <span class="comment">//整个代理对象</span></span><br><span class="line">                <span class="comment">//这个时候 就可以做劫持</span></span><br><span class="line">                <span class="keyword">return</span> target[key] = val</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">        pro.name = <span class="string">&#x27;lisi&#x27;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//apply 用来改变方法</span></span><br><span class="line"><span class="keyword">let</span> target =  <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;你好&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> handler = &#123;</span><br><span class="line">    <span class="function"><span class="title">apply</span>(<span class="params">target,ctx,args</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;do apply&#x27;</span>)</span><br><span class="line">        <span class="comment">//可以劫持函数</span></span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Reflect</span>.apply(...arguments)</span><br><span class="line">    &#125;   </span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> pro = <span class="keyword">new</span> <span class="built_in">Proxy</span>(target,handler)</span><br><span class="line"><span class="built_in">console</span>.log(pro())</span><br></pre></td></tr></table></figure>
<h2 id="class类-ES7"><a href="#class类-ES7" class="headerlink" title="class类 ES7"></a>class类 ES7</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>ES5的方式 用构造函数 去声明一个对象</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Phone</span>(<span class="params">brand,price</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.brand = brand</span><br><span class="line">    <span class="built_in">this</span>.price = price</span><br><span class="line">&#125;</span><br><span class="line">Phone.prototype.call = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;我可以打电话&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//实力化对象</span></span><br><span class="line"><span class="keyword">let</span> huawei = <span class="keyword">new</span> Phone(<span class="string">&#x27;华为&#x27;</span>,<span class="number">5999</span>)</span><br><span class="line">huawei.call() <span class="comment">//输出我可以打电话</span></span><br><span class="line"><span class="number">2.</span>ES6的声明</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Phone</span> </span>&#123;</span><br><span class="line">    <span class="comment">//我们在new的时候 会自动执行这个constructior 方法</span></span><br><span class="line">    <span class="function"><span class="title">constructior</span>(<span class="params">brand,price</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.brand = brand</span><br><span class="line">    	<span class="built_in">this</span>.price = price</span><br><span class="line">    &#125; <span class="comment">//注意这里没有逗号 没有逗号</span></span><br><span class="line">    <span class="comment">//方法必须使用改语法 不能使用ES5的对象完整形式 call:function 这种不支持</span></span><br><span class="line">    <span class="function"><span class="title">call</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我可以打电话&#x27;</span>)</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> huawei = <span class="keyword">new</span> Phone(<span class="string">&#x27;华为&#x27;</span>,<span class="number">5999</span>)</span><br></pre></td></tr></table></figure>
<h2 id="静态成员"><a href="#静态成员" class="headerlink" title="静态成员"></a>静态成员</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>首先我们知道 函数也是一个对象</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Phone</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="number">2.</span>所以我们向上面添加 成员 name 和方法</span><br><span class="line">Phone.name = <span class="string">&#x27;手机&#x27;</span></span><br><span class="line">Phone.change = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">&#x27;我可以改变世界&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="number">3.</span> 然后我们在<span class="keyword">new</span> 出来</span><br><span class="line"><span class="keyword">let</span> nokia = <span class="keyword">new</span> Phone() <span class="comment">//这里我们new 出来是一个实例对象 而我们上面的操作 只是向函数对象上添加了东西 这两个是不通的 所以会导致下面我们实力化对象的时候 访问不到 你向函数对象里面添加的一些东西</span></span><br><span class="line"><span class="built_in">console</span>.log(nokia.name) <span class="comment">//undefined</span></span><br><span class="line">nokia.change() <span class="comment">//报错</span></span><br><span class="line"><span class="number">4.</span> 我们的实力化对象 其实跟我们的构造函数的原型是相同的</span><br><span class="line">Phone.prototype.size = <span class="string">&#x27;5.5inch&#x27;</span></span><br><span class="line"><span class="built_in">console</span>.log(nokia.size) <span class="comment">//输出 5.5inch</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">所以 我们每个函数对象 都可以由自己的属性 但是当你作为实例的时候访问不到 因为这些属性 只属于我们自己的函数对象</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Phone</span> </span>&#123;</span><br><span class="line">    <span class="comment">//声明 函数自己的静态成员 用static声明的属性 指数徐我们自己构造函数 你实力化对象的时候 实例对象是访问不到的</span></span><br><span class="line">    <span class="keyword">static</span> name = <span class="string">&#x27;手机&#x27;</span>;</span><br><span class="line">    <span class="keyword">static</span> change = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;<span class="built_in">console</span>.log(<span class="string">&#x27;我可以改变世界&#x27;</span>)&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> nokia = <span class="keyword">new</span> Phone()</span><br><span class="line"><span class="built_in">console</span>.log(nokia.name) <span class="comment">//访问不到的 因为你是访问不到函数对象里的成员的</span></span><br><span class="line"><span class="built_in">console</span>.log(Phone.name) <span class="comment">// 手机 因为我们是用Phone 也就是函数对象 访问自己的成员 能打印出来</span></span><br></pre></td></tr></table></figure>
<h2 id="对象继承"><a href="#对象继承" class="headerlink" title="对象继承"></a>对象继承</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">ES5 的继承方法</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Phone</span> (<span class="params">brand,price</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.brand = brand</span><br><span class="line">        <span class="built_in">this</span>.price = price</span><br><span class="line">    &#125;</span><br><span class="line">    Phone.prototype.call = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我可以打电话&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//只能手机</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">SmartPhone</span> (<span class="params">brand,brand,color,size</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//这里为了把我们上面的颜色 和价格都继承过来  改变了this的指向</span></span><br><span class="line">        Phone.call(<span class="built_in">this</span>,brand,brand)</span><br><span class="line">        <span class="built_in">this</span>.color = color</span><br><span class="line">        <span class="built_in">this</span>.size = size</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//设置子集构造函数的原型 </span></span><br><span class="line">    SmartPhone.prototype = <span class="keyword">new</span> Phone</span><br><span class="line">    <span class="comment">//为了能分辨 到底是哪个构造函数构造出来的</span></span><br><span class="line">    SmartPhone.prototype.constructor = SmartPhone</span><br><span class="line">    <span class="comment">//设置自己的方法</span></span><br><span class="line">    SmartPhone.prototype.photo = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我能拍照&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">let</span> shouji = <span class="keyword">new</span> SmartPhone(<span class="string">&#x27;锤子&#x27;</span>,<span class="number">199</span>,<span class="string">&#x27;red&#x27;</span>,<span class="number">5.5</span>)</span><br><span class="line">    shouji.call()</span><br><span class="line">    <span class="built_in">console</span>.log(shouji)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">ES6 类的继承</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Phone</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">brand,price</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.brand = brand</span><br><span class="line">        <span class="built_in">this</span>.price = price</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">call</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我可以打电话&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//现在继承父类 使用 extends 关键字</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SmartPhone</span>  <span class="keyword">extends</span> <span class="title">Phone</span></span>&#123;</span><br><span class="line">    <span class="comment">//先声明自己的构造器</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">brand,price,color,size</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//我们上面使用了 extends关键字 下面的super就相当于调取了Phone的constructor方法</span></span><br><span class="line">        <span class="built_in">super</span>(brand,price) </span><br><span class="line">        <span class="built_in">this</span>.color = color</span><br><span class="line">        <span class="built_in">this</span>.size = size</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//然后在声明自己的方法</span></span><br><span class="line">    <span class="function"><span class="title">photo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我可以拍照&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="class-的-get-和-set"><a href="#class-的-get-和-set" class="headerlink" title="class 的 get 和 set"></a>class 的 get 和 set</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>这里可以理解我们的对象里的数defindPrototy 数据劫持 是一个道理 当我们当问 类里面的某一个成员的时候 如果这个成员设置了get 和 set 关键字 就可以做到劫持</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Phone</span> </span>&#123;</span><br><span class="line">    <span class="keyword">get</span> <span class="title">price</span>()&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;价格被读取了&#x27;</span>)</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;i love you&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">set</span> <span class="title">price</span>(<span class="params">newval</span>)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;价格被设置了&#x27;</span>)</span><br><span class="line">        <span class="built_in">console</span>.log(newval)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> s = <span class="keyword">new</span> Phone()</span><br><span class="line">s.price  <span class="comment">//这里会走我们设置get关键字的那个函数</span></span><br><span class="line">s.price = <span class="string">&#x27;free&#x27;</span> <span class="comment">// 这里会走我们设置set 的那个函数</span></span><br></pre></td></tr></table></figure>
<h2 id="对象的私有属性"><a href="#对象的私有属性" class="headerlink" title="对象的私有属性"></a>对象的私有属性</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>声明私有属性之后 外部访问不到 只能在内部才可以使用</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Prsion</span> </span>&#123;</span><br><span class="line">    name  <span class="comment">//这里是设置了共有属性</span></span><br><span class="line">    #age  <span class="comment">//加了 # 号 就是设置了 私有属性</span></span><br><span class="line">    #weight <span class="comment">//加了 # 号 就是设置了 私有属性</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name,age,weight</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name</span><br><span class="line">        <span class="built_in">this</span>.#age = age</span><br><span class="line">        <span class="built_in">this</span>.#weight = weight</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="function"><span class="title">say</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.#age)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//实例化对象 </span></span><br><span class="line"><span class="keyword">const</span> gril = <span class="keyword">new</span> Prsion(<span class="string">&#x27;小红&#x27;</span>,<span class="number">18</span>,<span class="number">55</span>)</span><br><span class="line"><span class="comment">//在外部是访问不到的</span></span><br><span class="line"><span class="built_in">console</span>.log(gril.#age) <span class="comment">//这个时候输出是报错的</span></span><br><span class="line"><span class="comment">//写在内部可以访问到 比如我调取了say方法</span></span><br><span class="line">gril.say()</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//声明类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Coder</span> </span>&#123;</span><br><span class="line">    <span class="comment">//注意这里面方法 和 方法 之间不要写逗号</span></span><br><span class="line">    <span class="function"><span class="title">name</span>(<span class="params">val</span>)</span> &#123; <span class="built_in">console</span>.log(val)&#125;</span><br><span class="line">    <span class="function"><span class="title">skill</span>(<span class="params">item</span>)</span> &#123; <span class="built_in">console</span>.log(item)&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> prsen = <span class="keyword">new</span> Coder</span><br><span class="line">prsen.name(<span class="string">&#x27;名字&#x27;</span>)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//class 里的this 值得整个class的作用域</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Coder</span> </span>&#123;</span><br><span class="line">    <span class="comment">//注意这里面方法 和 方法 之间不要写逗号</span></span><br><span class="line">    <span class="function"><span class="title">name</span>(<span class="params">val</span>)</span> &#123; <span class="built_in">console</span>.log(val) <span class="keyword">return</span> val <span class="comment">//注意这里一定要有返回值&#125;</span></span><br><span class="line">    <span class="function"><span class="title">skill</span>(<span class="params">item</span>)</span> &#123; <span class="built_in">console</span>.log(item) <span class="built_in">this</span>.name(<span class="string">&#x27;你好&#x27;</span>)+ item&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> prsen = <span class="keyword">new</span> Coder</span><br><span class="line">prsen.skill(<span class="string">&#x27;面对疾风&#x27;</span>) <span class="comment">// 输出 你好面对疾风</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//contructor 用来接收创建实例类的时候参数</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Coder</span> </span>&#123;</span><br><span class="line">    name (val)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val)</span><br><span class="line">        <span class="keyword">return</span> val</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">skill</span>(<span class="params">item</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name(<span class="string">&#x27;你好&#x27;</span>) + item)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//构造器</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.a = a</span><br><span class="line">        <span class="built_in">this</span>.b = b</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">add</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.a + <span class="built_in">this</span>.b)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> prse = <span class="keyword">new</span> Coder(<span class="string">&#x27;我来了&#x27;</span>,<span class="string">&#x27;我走了&#x27;</span>)</span><br><span class="line">prse.add() <span class="comment">//输出   我来了我走了</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//继承 extends</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Coder</span> </span>&#123;</span><br><span class="line">    name (val)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val)</span><br><span class="line">        <span class="keyword">return</span> val</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">skill</span>(<span class="params">item</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name(<span class="string">&#x27;你好&#x27;</span>) + item)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//构造器</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.a = a</span><br><span class="line">        <span class="built_in">this</span>.b = b</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">add</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.a + <span class="built_in">this</span>.b)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Coder</span> </span>&#123;</span><br><span class="line">    name (val)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val)</span><br><span class="line">        <span class="keyword">return</span> val</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">skill</span>(<span class="params">item</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name(<span class="string">&#x27;你好&#x27;</span>) + item)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//构造器</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.a = a</span><br><span class="line">        <span class="built_in">this</span>.b = b</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">add</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.a + <span class="built_in">this</span>.b)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//使用extends继承 Coder</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Htmler</span> <span class="keyword">extends</span> <span class="title">Coder</span></span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> htm = <span class="keyword">new</span> Htmler(<span class="number">1</span>,<span class="number">2</span>)</span><br><span class="line">htm.add()</span><br></pre></td></tr></table></figure>
<h2 id="数值扩展"><a href="#数值扩展" class="headerlink" title="数值扩展"></a>数值扩展</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">0.</span><span class="built_in">Number</span>.EPSILON 属性 主要用于浮点数的精确计算 这个属性接近于<span class="number">2.2204</span>----------<span class="number">16</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0.1</span>+<span class="number">0.2</span>) <span class="comment">//输出是 0.30000000-----4 这样是不科学的</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">equal</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//这里就是 认为 两个数值相减 如果小于 Number.EPSILONG 就说明你们两个是相当的</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">Math</span>.abs(a-b) &lt; <span class="built_in">Number</span>.EPSILONG)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>  </span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(equal(<span class="number">0.1</span> + <span class="number">0.2</span>, <span class="number">0.3</span>)) 返回是<span class="literal">true</span></span><br><span class="line"><span class="number">1.</span> 二进制 和 八进制</span><br><span class="line"><span class="keyword">let</span> b = <span class="number">0b1010</span> 二进制 是0b开头</span><br><span class="line"><span class="keyword">let</span> o = <span class="number">0o777</span> 八进制 是0o开头</span><br><span class="line"><span class="number">2.</span><span class="built_in">Number</span>.isFinite 监测一个数值是否为有限数</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isFinite(<span class="literal">Infinity</span>)) <span class="comment">//fanse</span></span><br><span class="line"><span class="number">3.</span><span class="built_in">Number</span>.parseInt() <span class="comment">//转换为整数  Number.parseFloat() 转换为浮点数</span></span><br><span class="line"><span class="built_in">Number</span>.parseInt(<span class="string">&#x27;5111love&#x27;</span>) <span class="comment">//5111</span></span><br><span class="line"><span class="built_in">Number</span>.parseFloat(<span class="string">&#x27;5.111love&#x27;</span>) <span class="comment">//5.111</span></span><br><span class="line"><span class="number">4.</span><span class="built_in">Number</span>.isInteger() <span class="comment">//判断一个数组是否为整数</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isInteger(<span class="number">3.33</span>)) <span class="comment">//false</span></span><br><span class="line"><span class="number">5.</span><span class="built_in">Math</span>.trunc <span class="comment">//将数组的小数部分去掉</span></span><br><span class="line"><span class="number">6.</span><span class="built_in">Math</span>.sign <span class="comment">// 判断一个数到底是正数 返回1 0的话返回0 负数返回 -1</span></span><br></pre></td></tr></table></figure>
<h2 id="模块化操作"><a href="#模块化操作" class="headerlink" title="模块化操作"></a>模块化操作</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">ES6之前的模块化规范由</span><br><span class="line">CommonJS =&gt; NodeJS Browserfy</span><br><span class="line">AMD =&gt; requireJS</span><br><span class="line">CMD =&gt; seaJS</span><br></pre></td></tr></table></figure>
<h2 id="模块暴露-模块导入"><a href="#模块暴露-模块导入" class="headerlink" title="模块暴露 模块导入"></a>模块暴露 模块导入</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">m1.js文件</span><br><span class="line"><span class="number">1.</span>分别暴露</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> school = <span class="string">&#x27;三小&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">teach</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">&#x27;我可以教会你们技能&#x27;</span>)&#125;</span><br><span class="line"><span class="number">2.</span>统一暴露</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> school = <span class="string">&#x27;三小&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">teach</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">&#x27;我可以教会你们技能&#x27;</span>)&#125;</span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">	school,</span><br><span class="line">    teach</span><br><span class="line">&#125;</span><br><span class="line"><span class="number">3.</span>默认暴露</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    school,</span><br><span class="line">    teach</span><br><span class="line">&#125;</span><br><span class="line">index.html文件 现在需要导入m1.js文件 以前是用 script 的 src 直接引入 现在就要变一下了</span><br><span class="line">&lt;script type=<span class="string">&quot;module&quot;</span>&gt;</span><br><span class="line">    <span class="number">1.</span>第一种引入方式 把你所有暴漏的出来的方法和变量 全部引入并且存在m1对象种</span><br><span class="line">    <span class="keyword">import</span> * <span class="keyword">as</span> m1 <span class="keyword">from</span> <span class="string">&#x27;./scr/m1.js&#x27;</span> <span class="comment">//无论哪种方式 都可以用 这种方式去引入</span></span><br><span class="line">	<span class="comment">//使用 m1.name</span></span><br><span class="line">	<span class="number">2.</span>第二种引入方式 和上面一样</span><br><span class="line">     <span class="keyword">import</span> &#123;schhol <span class="keyword">as</span> xuexiao,teach&#125; <span class="keyword">from</span> <span class="string">&#x27;./scr/m1.js&#x27;</span> <span class="comment">//第二种引入形式 可以重新命名</span></span><br><span class="line">	<span class="number">3.</span>第三种引入方式 </span><br><span class="line">    <span class="keyword">import</span> &#123;<span class="keyword">default</span> <span class="keyword">as</span> m3&#125; <span class="keyword">from</span> <span class="string">&#x27;./scr/m1.js&#x27;</span></span><br><span class="line">	<span class="comment">//使用 m3.default.teach()  因为你上面的是用export default 暴漏的 在使用的时候也要加default使用</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入的第二种方法</span></span><br><span class="line">我们在index.html里 还是用script标签 去引入一个入口文件app.js  然后app.js 使用我们上面的几种方法 去引入 对应的JS文件</span><br><span class="line">&lt;script src=<span class="string">&quot;./src/app.js&quot;</span> type=<span class="string">&quot;module&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line">app.js</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> m1 <span class="keyword">from</span> <span class="string">&#x27;./scr/m1.js&#x27;</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> m2 <span class="keyword">from</span> <span class="string">&#x27;./scr/m2.js&#x27;</span></span><br></pre></td></tr></table></figure>
<h2 id="import-动态引入"><a href="#import-动态引入" class="headerlink" title="import 动态引入"></a>import 动态引入</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>比如我们有三个文件  当我们点击按钮的时候才希望加载其中的一个文件</span><br><span class="line"><span class="keyword">const</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;btn&#x27;</span>)</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//只有当我们点击按钮的时候 才希望触发 hello文件里的 hellow方法 所以就可以使用下面的方式 </span></span><br><span class="line">    <span class="keyword">import</span>(<span class="string">&#x27;./hello.js&#x27;</span>).then( <span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">        item.hellow()</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="正则-命名捕获分组-ES9"><a href="#正则-命名捕获分组-ES9" class="headerlink" title="正则-命名捕获分组 ES9"></a>正则-命名捕获分组 ES9</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>需要对a标签里面的href 和 文本进行提取</span><br><span class="line">传统的方式</span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;&lt;a href=&quot;www.baidu.com&quot;&gt;百度&lt;/a&gt;&#x27;</span></span><br><span class="line"><span class="keyword">const</span> reg = <span class="regexp">/&lt;a href=&quot;(.*)&quot;&gt;(.*)&lt;\/a&gt;/</span></span><br><span class="line"><span class="keyword">const</span> res = reg.exec(str)  返回值 是一个 数组 一共由三个元素 第一个 是你整个字符串本身 第二个 是 你第一个(.*)里的东西 第三个是 是你第二个(.*)通配里面的东西</span><br><span class="line">(<span class="number">3</span>) [<span class="string">&quot;&lt;a href=&quot;</span>www.baidu.com<span class="string">&quot;&gt;百度&lt;/a&gt;&quot;</span>, <span class="string">&quot;www.baidu.com&quot;</span>, <span class="string">&quot;百度&quot;</span>, <span class="attr">index</span>: <span class="number">0</span>, <span class="attr">input</span>: <span class="string">&quot;&lt;a href=&quot;</span>www.baidu.com<span class="string">&quot;&gt;百度&lt;/a&gt;&quot;</span>, <span class="attr">groups</span>: <span class="literal">undefined</span>]</span><br><span class="line"><span class="number">0</span>: <span class="string">&quot;&lt;a href=&quot;</span>www.baidu.com<span class="string">&quot;&gt;百度&lt;/a&gt;&quot;</span></span><br><span class="line"><span class="number">1</span>: <span class="string">&quot;www.baidu.com&quot;</span></span><br><span class="line"><span class="number">2</span>: <span class="string">&quot;百度&quot;</span></span><br><span class="line">index: <span class="number">0</span></span><br><span class="line">input: <span class="string">&quot;&lt;a href=&quot;</span>www.baidu.com<span class="string">&quot;&gt;百度&lt;/a&gt;&quot;</span></span><br><span class="line">groups: <span class="literal">undefined</span></span><br><span class="line">length: <span class="number">3</span></span><br><span class="line">__proto__: <span class="built_in">Array</span>(<span class="number">0</span>)</span><br><span class="line"><span class="comment">//命名捕获 跟上面写法差不多 只要是给你要捕获的内容 写个名字 这些你些名字的捕获都会放在groups里</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;&lt;a href=&quot;www.baidu.com&quot;&gt;百度&lt;/a&gt;&#x27;</span></span><br><span class="line"><span class="keyword">const</span> reg = <span class="regexp">/&lt;a href=&quot;(?&lt;url&gt;.*)&quot;&gt;(?&lt;text&gt;.*)&lt;\/a&gt;/</span></span><br><span class="line"><span class="keyword">const</span> res = reg.exec(str)</span><br><span class="line"><span class="comment">//下面的group</span></span><br><span class="line">(<span class="number">3</span>) [<span class="string">&quot;&lt;a href=&quot;</span>www.baidu.com<span class="string">&quot;&gt;百度&lt;/a&gt;&quot;</span>, <span class="string">&quot;www.baidu.com&quot;</span>, <span class="string">&quot;百度&quot;</span>, <span class="attr">index</span>: <span class="number">0</span>, <span class="attr">input</span>: <span class="string">&quot;&lt;a href=&quot;</span>www.baidu.com<span class="string">&quot;&gt;百度&lt;/a&gt;&quot;</span>, <span class="attr">groups</span>: &#123;…&#125;]</span><br><span class="line"><span class="number">0</span>: <span class="string">&quot;&lt;a href=&quot;</span>www.baidu.com<span class="string">&quot;&gt;百度&lt;/a&gt;&quot;</span></span><br><span class="line"><span class="number">1</span>: <span class="string">&quot;www.baidu.com&quot;</span></span><br><span class="line"><span class="number">2</span>: <span class="string">&quot;百度&quot;</span></span><br><span class="line">index: <span class="number">0</span></span><br><span class="line">input: <span class="string">&quot;&lt;a href=&quot;</span>www.baidu.com<span class="string">&quot;&gt;百度&lt;/a&gt;&quot;</span></span><br><span class="line"><span class="comment">//在这里 我们命名的 都被存到这里了</span></span><br><span class="line">groups:</span><br><span class="line">url: <span class="string">&quot;www.baidu.com&quot;</span></span><br><span class="line">text: <span class="string">&quot;百度&quot;</span></span><br><span class="line">length: <span class="number">3</span></span><br><span class="line">__proto__: <span class="built_in">Array</span>(<span class="number">0</span>)</span><br></pre></td></tr></table></figure>
<h2 id="正则-反向断言-ES9"><a href="#正则-反向断言-ES9" class="headerlink" title="正则-反向断言 ES9"></a>正则-反向断言 ES9</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>提取字符串里面的数组 比如一个字符串里存在两段数字 而你只想提取某一段 就可以通过判断 你向提取数字的前面或者后面的字符串 去做正向断言 和反向断言的提取</span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;js5211314你知道么555拉拉&#x27;</span></span><br><span class="line"><span class="comment">//正向断言 我们现在向提取555这个数字 可以通过在些正则的时候 去看看他后面的字符串 来提取</span></span><br><span class="line"><span class="keyword">let</span> reg = <span class="regexp">/\d+(?=拉)/</span> 正向断言 看看我要提取的数字后有没有拉字 有拉字的我才提取</span><br><span class="line"><span class="keyword">let</span> res = reg.exec(str)</span><br><span class="line"><span class="comment">//反向断言 刚好相反 就是提取你要提取的数字前面的一个字符串</span></span><br><span class="line"><span class="keyword">let</span> reg = <span class="regexp">/(?&lt;=么)\d+/</span></span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>ES6/ES7/ES8/ES9/ES10/ES11</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="http://example.com/2020/04/22/ES6/">http://example.com/2020/04/22/ES6/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>北城韩雨</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h>2020-04-22</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h>2019-06-03</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/JavaScript/">JavaScript</a></div><div class="post_share"></div></div><link rel="stylesheet" href="/" media="defer" onload="this.media='all'"/><div class="post-reward"><button class="tip-button reward-button"><span class="tip-button__text">打赏</span><div class="coin-wrapper"><div class="coin"><div class="coin__middle"></div><div class="coin__back"></div><div class="coin__front"></div></div></div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/weixin.jpg" target="_blank"><img class="post-qr-code-img" src="/img/weixin.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/img/taobao.jpg" target="_blank"><img class="post-qr-code-img" src="/img/taobao.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></button></div><script defer="defer" src="/"></script><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2020/04/23/TypeScript/"><img class="prev-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">TypeScript</div></div></a></div><div class="next-post pull-right"><a href="/2020/04/21/uni-app/"><img class="next-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2017-07-20%2F4f06f9aa2ebcea6691a78537052e8e9f%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530599&amp;t=32fb97bad7007bdc6c712ccadacd5721" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Uni-app</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2020/04/27/写一个简版的Promise/" title="手写一个简版的promise"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2017-07-20%2F4f06f9aa2ebcea6691a78537052e8e9f%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530599&t=32fb97bad7007bdc6c712ccadacd5721" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-27</div><div class="title">手写一个简版的promise</div></div></a></div><div><a href="/2020/04/27/设计模式/" title="发布订阅"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530702&t=80943e12d5239f63beafd6d1c540855f" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-27</div><div class="title">发布订阅</div></div></a></div><div><a href="/2020/04/26/js事件循环机制/" title="JavaScript 事件循环机制"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-26</div><div class="title">JavaScript 事件循环机制</div></div></a></div><div><a href="/2020/04/01/事件绑定/" title="事件绑定"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530659&t=bbcfe1e86f393eecbb0722db1b92e475" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-01</div><div class="title">事件绑定</div></div></a></div><div><a href="/2020/03/29/Dialog/" title="弹框组件"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530702&t=80943e12d5239f63beafd6d1c540855f" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-03-29</div><div class="title">弹框组件</div></div></a></div><div><a href="/2020/03/28/拖拽/" title="拖拽"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2016-12-29%2F0604092c7129acd0f4029c6728db7fd7%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530724&t=333c5056a813a542419e5b661ebcfcd9" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-03-28</div><div class="title">拖拽</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/my.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">北城韩雨</div><div class="author-info__description">一个前端界的小学生</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/wazer1987"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="/wangzhengvslike@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>感谢访问本站，如喜欢请收藏。本站主要分享前端知识，立志成为资深前端工程师，但目前是一个前端界的小学生 若喜欢可以打赏请博主喝一杯冰阔落</p> <p>另外请大家多多支持淼哥的开源项目</p> <p>https://github.com/flipped-aurora/gin-vue-admin</p> <p>🌟🌟欢迎大家start 🌟🌟</p> <p>欢迎加入博主的前端技术交流群</p> <p style="background:rgba(255,255,255,1);margin:0"> <img src="/img/code.png"></img> </p></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%8E%AF%E5%A2%83%E7%9A%84%E6%90%AD%E5%BB%BA"><span class="toc-text">环境的搭建</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A3%B0%E6%98%8E%E6%96%B9%E5%BC%8F"><span class="toc-text">声明方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC"><span class="toc-text">变量的解构赋值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%A8%A1%E6%9D%BF"><span class="toc-text">字符串模板</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="toc-text">数字的操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-text">箭头函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8"><span class="toc-text">迭代器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E5%99%A8%E5%87%BD%E6%95%B0"><span class="toc-text">生成器函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E5%99%A8%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92"><span class="toc-text">生成器函数的参数传递</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E5%99%A8%E5%87%BD%E6%95%B0%E5%AE%9E%E4%BE%8B"><span class="toc-text">生成器函数实例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Promise"><span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Promise-allSettled-%E5%92%8C-Promise-all"><span class="toc-text">Promise.allSettled 和 Promise.all</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%AF%E9%80%89%E8%BF%9E%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">可选连操作符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="toc-text">数组的操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#forEach"><span class="toc-text">forEach</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#filter"><span class="toc-text">filter</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#some"><span class="toc-text">some</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#map"><span class="toc-text">map</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#includes-ES7"><span class="toc-text">includes ES7</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#flat-%E5%92%8C-flatMap-ES10"><span class="toc-text">flat 和 flatMap ES10</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%96%B9%E6%B3%95-trimStart-%E5%92%8C-trimEnd"><span class="toc-text">字符串的方法 trimStart() 和 trimEnd()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#async-%E5%92%8C-await-ES8"><span class="toc-text">async 和 await ES8</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Object-values-%E5%92%8C-Object-entries-ES8"><span class="toc-text">Object.values 和 Object.entries ES8</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="toc-text">函数的操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E5%92%8C%E6%95%B0%E7%BB%84%E7%9A%84%E5%87%BD%E6%95%B0%E8%A7%A3%E6%9E%84"><span class="toc-text">对象和数组的函数解构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#in%E7%9A%84%E7%94%A8%E6%B3%95"><span class="toc-text">in的用法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84key%E5%80%BC%E6%9E%84%E5%BB%BA"><span class="toc-text">对象的key值构建</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Object-is"><span class="toc-text">Object.is()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Object-assign-%E5%90%88%E5%B9%B6%E5%AF%B9%E8%B1%A1"><span class="toc-text">Object.assign() 合并对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Object-setPrototypeOf-%E8%AE%BE%E7%BD%AE%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1"><span class="toc-text">Object.setPrototypeOf 设置原型对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#object-fromEntries-ES10"><span class="toc-text">object.fromEntries  ES10</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Symbol-%E6%96%B0%E5%A2%9E%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-text">Symbol 新增的数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Set-%E5%92%8C-WeakSet-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E7%B1%BB%E5%9E%8B"><span class="toc-text">Set 和 WeakSet 数据结构类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#set%E9%9B%86%E5%90%88%E5%AE%9E%E8%B7%B5"><span class="toc-text">set集合实践</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#map%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E7%B1%BB%E5%9E%8B"><span class="toc-text">map数据结构类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#proxy-%E4%BB%A3%E7%90%86"><span class="toc-text">proxy 代理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#class%E7%B1%BB-ES7"><span class="toc-text">class类 ES7</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%99%E6%80%81%E6%88%90%E5%91%98"><span class="toc-text">静态成员</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%BB%A7%E6%89%BF"><span class="toc-text">对象继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#class-%E7%9A%84-get-%E5%92%8C-set"><span class="toc-text">class 的 get 和 set</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7"><span class="toc-text">对象的私有属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E5%80%BC%E6%89%A9%E5%B1%95"><span class="toc-text">数值扩展</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E6%93%8D%E4%BD%9C"><span class="toc-text">模块化操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E6%9A%B4%E9%9C%B2-%E6%A8%A1%E5%9D%97%E5%AF%BC%E5%85%A5"><span class="toc-text">模块暴露 模块导入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#import-%E5%8A%A8%E6%80%81%E5%BC%95%E5%85%A5"><span class="toc-text">import 动态引入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%AD%A3%E5%88%99-%E5%91%BD%E5%90%8D%E6%8D%95%E8%8E%B7%E5%88%86%E7%BB%84-ES9"><span class="toc-text">正则-命名捕获分组 ES9</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%AD%A3%E5%88%99-%E5%8F%8D%E5%90%91%E6%96%AD%E8%A8%80-ES9"><span class="toc-text">正则-反向断言 ES9</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin"><img src="/img/gin-vue-admin.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Gin-Vue-Admin"/></a><div class="content"><a class="title" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin">Gin-Vue-Admin</a><time datetime="2021-04-15T16:00:00.000Z" title="发表于 2021-04-16 00:00:00">2021-04-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件的渲染10"/></a><div class="content"><a class="title" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10">Vue源码开发-组件的渲染10</a><time datetime="2021-01-07T16:00:00.000Z" title="发表于 2021-01-08 00:00:00">2021-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件合并策略09"/></a><div class="content"><a class="title" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09">Vue源码开发-组件合并策略09</a><time datetime="2021-01-06T16:00:00.000Z" title="发表于 2021-01-07 00:00:00">2021-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-数组的依赖收集08"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08">Vue源码开发-数组的依赖收集08</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-生命周期合并07"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07">Vue源码开发-生命周期合并07</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright"><span>&copy;2017 - 2021</span><svg style="width:2em; height:2em;position: relative;top: 10px;" aria-hidden="true"><use xlink:href="#icon-Butterfly"></use></svg><span>北城韩雨</span></div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a><a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><div class="js-pjax"></div><script defer src="/live2d-widget/autoload.js"></script><script src="/js/coin.js"></script><script async src="//at.alicdn.com/t/font_2700632_3rtvhzzpl3h.js"></script><script src="/js/liuxing.js" data-pjax></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '0ms');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>